WordPressショートコード実装方法[よくある吹き出しが簡単に]

アフロ

プログラミングを学びたいなーー！どうやって学ぼうかな、、、？

下記の方に向けて書きます。

簡単に僕の紹介をしておきます。

良い感じのWordPressテーマならショートコードは実装されていて
記事投稿の手助けをしてくれてます。

僕のメモ代わり
兼
WordPressテーマ開発をしている人向けにかきますね。

WordPressのショートコード実装方法

まず
ショートコードとは？ですね。

毎回、記事作成でコードを書いていたら時間の無駄ですよね。

コードのミスも発生しますし。

そんなわけでWordPressの開発でショートコードは意外にも重要なポジションに君臨してるんです。

早速、コピペOKな解説をしていきます。

ショートコード実装

以下のコードを

開発中のテーマ
or
使ってるテーマ

の「function.php」というファイルにコピペします。

function divBox( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'default',
), $atts ) );

return '<div class="'.$class.'"><p>'.$content.'</p></div>';
}
add_shortcode('box', 'divBox');

解説

ちょっと慣れないと難しく見えるかもだけど

「return」の中に吹き出しとかの呼び出したいHTMLのコードを書きます。

もし、ブロックが増えてclass名を追加したいときは

このように、classを追加したりできます。

 PHP
'class' => 'default',
'class1' => 'default',
'class2' => 'default',

ここで指定したclassは
実際に以下のようにショートコードを書くときに代入されていきます。

 shortcode
[box class="任意のクラス名"]テキストテキスト[/box]

class名が複数あるなら

 shortcode
[box class="クラス1つ目" class2="クラス2つ目" class3="クラス3つ目"]テキストテキスト[/box]

これ見たことある人なら理解は早いはず！！

WordPressの記事投稿内で直接書くことができます。

書くときは「ビジュアル」モードですよ。

という感じでコードを書いたわけですが

HTMLのコードはこれで出力してくれますが

スタイルの方はまだ設定していないないので、デザインは何も変わらないはずです。

スタイルの実装は
WordPressではいくつか方法があります。

主に下記の方法です。

こんな感じです。

このとき、子テーマがあるなら子テーマに反映したほうが
のちのち良いです。

親テーマで実装してると
親テーマのアップデートしたとき、消えてしまいます。

プラグイン「AddQuicktag」

ショートコードをもっと便利にしてくれるプラグインがあります。

「AddQuicktag」というプラグインでインストールして、有効化すると

設定の中に「AddQuicktag」の項目ができるので

ショートコードをそれぞれ追加しておきます。

記事投稿内で登録したショートコードをワンクリックで挿入できるようになります。

まとめ

以上がWordPressのショートコード実装方法でした。

慣れないうちはPHPのコードが意味不明に感じるかもですが、
取りあえす、上のコードをコピペできていればOKだと思います。

あと、注意することとしては
少しでもコードに不安があるならサイトのバックアップをとっておきましょう。

もし、「function.php」の記載を間違ってしまえば
最悪はサイトが真っ白になり表示されなくなります。

一応、そうなってしまった場合も修復する術はあるので

サイトが表示されなくなった時は僕とかにお問い合わせしてもらえたらと思います。

にぃやん

それでは！ よきエンジニアライフを！