プログラミング

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

WordPressショートコード実装方法[よくある吹き出しが簡単に]
にゃーきゃっと
プログラミングを学びたいなーー!どうやって学ぼうかな、、、?

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

この記事の内容

・WordPressのテーマ開発してる人
・記事投稿をより便利に早くしたい人
・PHP学習してる人

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

僕は現在、Web会社でフロントエンドエンジニアをしています。HTML/CSS/JSを使用したコーディングという業務もバリバリしています。最近ではPHPもやったりしてます。

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

僕のメモ代わり

WordPressテーマ開発をしている人向けにかきますね。

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

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

WordPressの記事内で吹き出しのデザイン等に必要なHTMLなどのコードを呼び出してくれる機能です。

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

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

そんなわけで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ではいくつか方法があります。

 

主に下記の方法です。

  1. 外観の追加CSSに書く
  2. 外観のテーマエディターに書く
  3. style.cssみたいな任意のファイルをテーマにアップロドする

 

こんな感じです。

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

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

プラグイン「AddQuicktag」

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

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

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

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

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

まとめ

まとめ

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

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

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

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

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

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

にいやん
それでは! よきエンジニアライフを!
  • この記事を書いた人
つちだ

えんじ兄やん(えんにぃ)

現役のエンジニアです。日々Web制作に勤しみつつ、ブログ更新していきます。ポートフォリオ兼仕事依頼ページも同時に作成中ですのでご期待ください。/東京在住/30歳/フロントエンド/スノボ/バイク/オムライス

-プログラミング

Copyright© 2019-2021 そろりかく。 All Rights Reserved.