ショートコードで文字を装飾する

記事を書いているとき文字を装飾すると思いますが、ツールバーの装飾だけではチープな見た目になるなーと感じていませんか。

今回紹介するのは、簡単かつ柔軟に文字を装飾できる方法について綴っていこうと思います。
設定は簡単なので是非やってみてください。

ショートコードの設定

管理画面からも直接ファイルをいじることは可能ではあるのですが、慣れていないと事故る可能性があるので、FTPとかで一旦ローカル環境に落としてからいじることをお勧めします。
functions.phpに以下のコードを貼り付けてください。

function underline( $atts, $content = null ) {
return '<span class="u-underline">' . $content . '</span>';
}
add_shortcode('ul', 'underline');

これで90%設定は完了です。あとはどんな装飾にするのか決めるだけです。

これは一体なんの処理なのかというと、ショートコードをHTMLタグとして吐き出すといった関数になります。

関数内の処理内容

returnのところに生成したいHTMLの要素を書く訳ですが、今回はアンダーラインを作成しようと思っているので<span>タグにしています。
class="u-underline"には今回追加したいCSSのクラスを指定します。今回クラス名はu-underlineとしていますが、自分がわかりやすい任意の名前をつけてください。

.contentにはショートコードで囲ったものが入ります。

ショートコードの書き方

ショートコードの書き方は以下のようになります。

//投稿画面のエディタ
[[ul]テキスト部分][/ul] 

アンダーラインを引きたい部分に[ul][/ul]で囲むだけです。

この記述方法を囲い込みショートコードといいます。
[ul][/ul]で囲んだ部分にCSSのクラスが当たります。

実際HTMLタグが挿入されているか確認してみる

囲んだら記事のページを確認してみてください。
因みにまだCSSにスタイルを当てていないので囲った部分は今のところ何も変化はないと思いますが、それは最後にやるので一旦大丈夫です。



F12で検証ツールを開くとこのような画面になると思います。




次に上の矢印のアイコンをクリックし、アンダーラインで囲ったテキスト部分をクリックします。




<span></span>タグが挿入されていることが確認できたらOKです。F12キーをもう一度押して検証ツールを閉じてください。

CSSにスタイルをつける

CSS用のエディタを開いて以下のコードを貼り付けてください。

.u-underline {
background: linear-gradient(transparent 60%, #fbc 60%);
}

これがアンダーラインのCSSスタイルになります。
装飾のパターンはネット上に沢山落ちているので探してみてください。

自分はこのサイトをよく使わせてもらっていいます。色々パターンを公開してくれています。
https://saruwakakun.com/html-css/reference/h-design
https://jajaaan.co.jp/css/css-headline/

他にも装飾のパターンを増やしたい場合

先ほど設定したfunctions.phpに関数をコピペして中身を新たに置き換えるだけでOK。

置き換える場所は３点
・関数名
・HTMLのタグ部分
・ショートコードの名前

//最初に追加したアンダーラインの関数
function underline( $atts, $content = null ) {
return '<span class="u-underline">' . $content . '</span>';
}
add_shortcode('ul', 'underline');

//新たに追加する関数
function 【関数名】( $atts, $content = null ) {
return '【HTMLのタグ部分】' . $content . '【HTMLの閉じタグ】';
}
add_shortcode('【ショートコードの名前】', '【関数名】');

functions.phpの関数を置き換えたらあとは自分の付けたい装飾をCSSで付け加えるだけです。

ショートコードは増えてくると使う時にどれだっけーってなると思うので、メモしておくと使う時スムーズになると思います。

以上、ショートコードの作成と使い方でした。