機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

wordpressで枠で文字列を囲んで強調するためのショートコードを作る

プログラミング

枠で文字列を装飾したい、強調表示したいなーと思ったこと、あると思います。
いちいちCSSとHTMLを書くのも億劫なので、ショートコードで簡単に枠が作れるようにしたいと思います。

CSSを読み込む

プログラミング

functions.php


function load_import_css() { wp_enqueue_style( "import_style", get_stylesheet_directory_uri()."/css/main.css", false ); } add_action('wp_enqueue_scripts', 'load_import_css');

子テーマの/css/main.css

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.isa_info, .isa_success, .isa_warning, .isa_error {
margin: 10px 0px;
padding:12px;

}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFD2D2;
}
.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
    margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}

ショートコードを登録する

プログラミング

functions.php


// // CSS Message Boxes With CSS3 // function info($attr){ return '<div class="isa_info"><i class="fa fa-info-circle"></i>' . $attr[0] . '</div>' ; } add_shortcode('info','info') ; function warn($attr){ // return '<div class="isa_warning"><i class="fa fa-warning-circle"></i>'. $attr[0] .'</div>' ; return '<div class="isa_warning"><i class="fa fa-warning"></i>'. $attr[0] .'</div>' ; } add_shortcode('warn','warn') ; function succ($attr){ // return '<div class="isa_warning"><i class="fa fa-warning-circle"></i>'. $attr[0] .'</div>' ; return '<div class="isa_success"><i class="fa fa-check"></i>'. $attr[0].'</div>' ; } add_shortcode('succ','succ') ;

検証する

プログラミング

さて、無事表示されるか確認してみましょう。

新しい記事を作成し、以下を貼り付けてください。

<div class="isa_info"><i class="fa fa-info-circle"></i>Replace this text with your own text.</div>
[info hogehoge]
[warn fuga]
[succ hoge]

“記事をプレビュー”すると、きちんと枠が表示されているはずです。

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WordPressにSNSシェアボタンを実装しました [メタ]
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu