2022.01.09
【WordPress】自作のショートコードを作成し、記事内の複雑な装飾などを楽に管理する
ショートコードとは？使うメリット
ショートコードの導入により関数を簡単に呼び出すことができます。
どんなことができるのかと言うとクラスを付与したり、定型文を呼び出したりできます。
結果的に記事執筆を効率化できます。
呼び出す関数はfunctions.phpで定義していきます。
※テーマエディタで直接編集する際は絶対バックアップとってからいじってください。
カエレバやkatteneのようなプラグインの機能を例に実際作成していきます。
この記事を参考にすれば他にも応用は効くと思います。
ショートコードを作成する
今回はショートコードで定型のHMTL構造を生成させます。
生成しようとしているHTMLの構造はこんな感じです。
<div class="c-katte">
<div class="c-katte__content">
<p class="c-katte__image">
<a href="URL" target="_blank" rel="noopener">
<img src="画像パス" alt=""></a></p>
<div class="c-katte__wrap">
<div class="c-katte-wrap__desc">
<a href="URL" class="c-katte__title">
ロジクール Pebble M350
</a>
<p class="c-katte__description">description</p>
</div>
<a href="URL" class="c-katte__button">Amazon</a>
</div>
</div>
</div>結構複雑ですがやり方がわかると他にも流用できると思うのでやってみてね。
HTMLを生成させる関数はfunctions.phpで定義します。
functions.phpの設定
全体のコード
function katte_parent( $atts, $content = null ) {
$content = do_shortcode( shortcode_unautop( $content ) );
return '<div class="c-katte">
<div class="c-katte-content">' . $content . '</div>
</div>';
}
add_shortcode('katte_parent', 'katte_parent');
function katte_img( $atts, $content = null ) {
extract( shortcode_atts( array(
'src' => null,
'url' => null,
'description' => null
), $atts ) );
return '<p class="c-katte-image">
<a href="'. $url .'" target="_blank" rel="noopener">
<img src="' . $src. '">' . $content . '</a></p>';
}
add_shortcode('katte_img', 'katte_img');
function katte_description( $atts, $content = null ) {
extract( shortcode_atts( array(
'src' => null,
'img_url' => null,
'title_url' => null,
'button_url' => null,
'title' => null,
'description' => null,
), $atts ) );
return '<div class="c-katte-wrap">
<div class="c-katte-wrap__desc">
<a href="'. $title_url .'" class="c-katte-title">' . $title . '</a>
<p class="c-katte-description">' . $description . '</p>
</div>
<a href="'. $button_url .'" class="c-katte-button">Amazon</a>
</div>';
}
add_shortcode('katte_description', 'katte_description');katte_parent, katte_img, katte_description ←この三つの関数がショートコードの正体になります。
それぞれ定義した関数をショートコードとしてエディタに書けばその関数を呼び出すことが可能になります。
最初の関数では親要素にあたるHTMLを生成させる処理を行なっています。
function katte_parent( $atts, $content = null ) {
//囲い込みショートコードの記述
$content = do_shortcode( shortcode_unautop( $content ) );
//returnで生成させたいDOMを記載
//$contentにはショートコードに囲まれた文字列が入ります。今回の場合はネストさせる関数が入ります。
return '<div class="c-katte">
<div class="c-katte-content">' . $content . '</div> </div>';
}
add_shortcode('katte_parent', 'katte_parent');do_shortcodeの記述により囲い込みショートコードの記述が可能になります。
この記載が抜けると囲い込みができませんので忘れずに。
//囲い込みショートコードの書き方
[katte_parent]hogehoge[/katte_parent]$contentにはショートコードに囲まれた文字列が入ります。上記の例で言うとhogehogeが$contentに入ります。
//２個目の関数
function katte_img( $atts, $content = null ) {
extract( shortcode_atts( array(
'src' => null,
'url' => null,
'description' => null
), $atts ));
return '<p class="c-katte-image"> <a href="'. $url .'" target="_blank" rel="noopener">
<img src="' . $src. '">' . $content . '</a></p>';
}
add_shortcode('katte_img', 'katte_img');最初の関数と異なる部分はextractで引数を設定している所です。
'hoge' <= null ←この部分で引数の設定をします。
引数の部分はnullではなく決め打ちでも可能で、定型文を入れたい場合は決め打ちでもいいでしょう。
エディタでショートコードを書く際にこのnullに入る文字列を入れていきます。
以下コード参照↓↓
[katte_img src="【https://画像のパス】" url="【リンク先】"]
[/katte_img]このように引数を活用していけば属性にも対応できます。
CSSのスタイル
一応CSSも載せておきます。ここら辺は自分のお好みで調整してOK。
.c-katte {
display: flex;
justify-content: center;
font-size: 15px;
}
.c-katte-content {
display: flex;
justify-content: center;
padding: 15px;
border: solid 1px #eee;
@include mq(sp) {
flex-direction: column;
align-items: center;
}
}
.c-katte-image {
width: 30%;
display: flex;
transition-duration: 0.2s;
&:hover {
opacity: 0.8;
}
@include mq(sp) {
width: 40%;
}
}
.c-katte-wrap__desc {
@include mq(sp) {
display: flex;
flex-direction: column;
}
}
.c-katte-wrap {
display: flex;
flex-direction: column;
width: 290px;
margin-left: 25px;
}
.c-katte-title {
text-decoration: underline;
color: mediumblue;
}
.c-katte-description {
margin: 20px 0 15px;
font-size: 14px;
}
.c-katte-button {
color: #fff;
background-color: #fe9a25;
border-bottom: 5px solid #eb6100;
padding: 10px;
width: 200px;
text-align: center;
font-size: 16px;
border-radius: 8px;
transition-duration: 0.2s;
&:hover {
margin-top: 3px;
color: #fff;
background: #fe9a25;
border-bottom: 2px solid #eb6100;
}
}
まとめ
ショートコードの使い方を知れば文字の装飾等を簡単に行うことができるので頑張って覚えるのもありかなと思います。
プラグインを仕様すればこんな面倒なことなんてしなくても良いんですが、少しでもサイトを軽くしたい場合はそういったプラグインに頼らず、自前で作成するのもアリだと思います。