目次
ショートコードとは
ショートコードは、簡単に言うと
↑こういうボックスを簡単に呼び出すことができるコードです。
スマホにもある、よく使う単語をユーザー辞書としてキーボードに登録できる機能と同じだと思ってください。
上記のようなボックスを呼び出すには、基本的に毎回HTMLを記述しなければなりません。
今回ご紹介するのは、”よく使うHTMLを登録できるプラグイン”を応用したものです。
初心者の方でもコピペすれば使えるようになりますが、FTPソフトを使用できればより簡単に作成できます。
おすすめのFTPソフト「WinSCP」の使い方
作成するショートコード
今回作成するのは、
Point
ここに文字
↑このボックスです。
これを、HTMLを毎回記述しなくてもクリック一つで挿入できるように設定していきます。
事前準備
ショートコードを挿入するのに便利なプラグインと、オリジナリティを出すためにWebフォントを使用します。
Webフォントは必須ではないので、好みにお任せします。
プラグインをインストールする
まずは「AddQuicktag」というプラグインをインストールして有効にしてください。
このプラグインは、登録した単語を投稿画面で呼び出すためのものです。
本来はHTMLを登録するだけでも良いのですが、WordPressの投稿画面ではHTMLを挿入する場合、[ビジュアル]だとテキストとして認識されるので[テキスト]にタブを切り替えなければなりません。
それでは面倒且つ効率的ではないので、ショートコードを使って[ビジュアル]と[テキスト]のタブを切り替えずにボックスを挿入します。
Font Awesomeを使用できるようにする
Font Awesomeとは、Webアイコンを表示できるようにするサービスです。
このボックスでいうところのMEMOの左側にある絵文字みたいなものがWebアイコンです。
では、header.phpの中にある<head>~</head>タグの間に以下のコードを貼り付けてください。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
FTPソフトから設定出来ない方は、
ダッシュボード→外観→テーマエディター→右側のheader.php
を選択してください。
色々コードが書かれていると思いますが、
<head>
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
</head>
このように<head>タグの間に入っていれば大丈夫です。
不安な方は</head>のすぐ上に行を追加して貼れば確実です。
ショートコードを作成する
先述しましたが、以下が完成例です。
補足などを書きたいときに使えそうなボックスですね。
Point
ここに文字
functions.phpに記述する
functions.phpに以下のコードをコピーして貼ってください。
FTPソフトが使えない方はWordPressの
ダッシュボード→外観→テーマエディター→右側のfunctions.php
から追記してください。
必ずバックアップを取ってから作業を行ってださい。
// ポイント
function box1Func( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'box1',
), $atts ) );
return '<div class="' . $class. '"><p class="point"><i class="fas fa-lightbulb"></i>Point</p><p>' . $content . '</p></div>';
}
add_shortcode('box1', 'box1Func');貼れたら保存しましょう。
CSSを記述する
style.cssに以下のコードをコピーして貼ってください。
/* ポイント */
.box1{
background-color: #f6ffb9;
padding: 1em 1em 1em 1em;
}
.box1 .point{
color: #f39800;
font-weight:bold;
font-family: 'メイリオ';
}
.point .fas{
margin-right:0.5em;
}
もし背景色などを変更したりカスタマイズしたい方は、以下を参考にしてください。
AddQuicktagの設定
ダッシュボード→設定→AddQuicktag
を開いてください。
画像を参考に設定してください。
ボタンのラベルは自分がわかりやすい名前に変更しても大丈夫です。
開始タグのところに
[box1]ここに文字[/box1]
と入力します。
終了タグは空白です。
ビジュアルエディター、post、pageにチェックをしたら保存してください。
ショートコードを挿入する
ショートコードを挿入したいときは、投稿画面の「Quicktags」を選択します。
先程入力したラベルを選択します。
私が入力した通りなら「ポイント」ですね。
本文にショートコードが挿入されたのを確認します。
プレビューで以下のボックスが表示されていたら完成です！
Point
ここに文字
”ここに文字”のテキストは自由に変更して使用してください。
応用
コードを少し書き換えることで、以下のようなボックスを作成することができます。
注意
ここに文字
このボックスを作成したい場合は、functions.phpに以下を記述します。
// 注意
function box2Func( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'box2',
), $atts ) );
return '<div class="' . $class. '"><p class="caution"><i class="fas fa-exclamation-triangle"></i>注意</p><p>' . $content . '</p></div>';
}
add_shortcode('box2', 'box2Func');
style.cssは以下の通りです。
/* 注意 */
.box2{
background-color: #ffc4c4;
padding: 1em 1em 1em 1em;
}
.box2 .caution{
color: #ff0000;
font-weight:bold;
font-family: 'メイリオ';
}
.caution .fa{
margin-right:0.5em;
}
AddQuicktagのラベルは「注意」にしましたが、自由に設定してください。
当ブログは有料テーマの機能を使用しているのでデザインが違いますが、背景色などはご自身のブログのテーマに合った色を使用すると馴染むのでカスタマイズしてみてください。
