code snippetsはWordPress 初心者向けのショートコード化プラグイン

WordPressにショートコードを使ってphpなどのタグを埋め込むことができるcode snippetsは、初心者にとって便利なプラグインです。

通常、投稿ページにphpなどのタグを埋め込むためにショートコード化するには、WordPressの心臓部とも言える、functions.phpに手を加えなければいけません。

code snippetsはfunctions.phpを直接触る事なく、functions.phpに手を加えられるプラグインなので、phpにあまり慣れていない初心者にとって使いやすいものです。

そして、初心者にとってphpを学ぶこともできるプラグインだと私は思います。

登録できるのは4種類

プラグインをインストールし有効化したら、早速登録作業に移るわけですが、登録できるのはphpだけでなく、html、CSS、Java scriptの4種類。

　
　
　
htmlなら、phpでHTMLページに出力する形になるので、phpとの組み合わせますが、ほぼほぼphpの部分を編集する必要はありません。
　

　
　
　
CSS、Javascriptなら、/* write your CSS（Javascript） code here */ の部分を自作のコードに変えて、
　

　
　
　
descriptionにコードの説明。そしてtagにCSS（Javascript）と入力し、Save Change and Active か Save changeで保存します。
　

　
　
英語で表記されてされていますが、なかなか親切です。
　
　
スポンサードリンク
　

アドセンスのコードをショートコード化

WordPressを運営する上で一番お世話になるショートコードは、Googleアドセンスではないかと思いますが、アドセンスをサイトに表示させるとき、ルールとして広告の上に『スポンサードリンク』という文字を付けなければいけません。
　
アドセンスのコードはJavascriptなので、スポンサードリンクを表示させるhtmlと組み合わせてショートコードを作ることになります。
　
作り方は２つあります。

①サンプルを利用する

htmlのサンプルにスポンサードリンクの文字とアドセンスのコードを入れます。

$out = '<p>write your HTML shortcode content here</p>';

の部分を

$out = '<p>スポンサードリンク</p>アドセンスのコード';

にし、
　
shortcode_nameを管理しやすい名前に変えます。
（この名前をショートコード名として利用する為）

②ショートコードの一般的な型を使う

function ショートコードの機能名() {
	return ’表示させたい内容’;
add_shortcode('shortcode_name', 'ショートコードの機能名');

　
returnの後のシングルクォーテーションの中に、スポンサードリンクの文字とアドセンスのコードを入れ、shortcode_nameを同じように管理しやすい名前に変えます。

　
　
①のサンプルを利用する場合、一旦変数 $out に格納して表示させる方法をとっていますが、特に変数にする必要はなく、②のように直接表示させても大丈夫です。
　
　
パソコンかレスポンシブかで表示させるアドセンスコードを変える場合、もう少し複雑になりますが、単純に表示させるだけなら、さほど難しくはないかと思います。
　
　
そして、プラグインで作成したショートコードは、このままfunctions.phpに記述することで機能させることができます。
　
　
じゃあ、わざわざプラグインを使う必要ないんじゃないの？と思うかもしれません。
子テーマを作って子テーマのfunctions.phpに記述しても機能してくれますし。
　
　
ちなみに、こちらの記事で記載している方法でクイックタグに表示させると、クリック一つでショートコードが活用できます。

WordPressで自作CSSを管理するクイックタグ活用法

初心者に優しい機能

このプラグインの良いところは、文法ミスがあってもエラー検出してくれるところ。
このように矢印のセミコロンがありますが、

　
　
phpに必要なセミコロンを誤って消してしまったり、入力し忘れると、エラー表示してくれます。
　
　

　
このままSave Change and Activeボタンを押すと、このような画面が出てきて対応策を表示してくれます。
　

　
　
　
英語なのでパニくってしまいますよね。しかし日本語に訳すとこういう文章になります。

『パニックにならないでください
保存しようとしているコードスニペットは、5行目に致命的なエラーを生成しました。

構文エラー、予期しない ‘return’（T_RETURN）
スニペットの以前のバージョンは変更されておらず、このサイトの残りの部分は以前と同じように正常に機能しているはずです。

ブラウザの[戻る]ボタンを使用して前のページに戻り、コードエラーの修正を試みてください。必要に応じて、このページを閉じて、今行った変更を破棄できます。このサイトは変更されません。』

　
　
このように、アクティブして保存しようとしても、機能させないようにしています。　
エラーのままSave Changesで保存しても機能OFFのままで、内容は保存された状態にしてくれます。
　
code snippetsは初心者にありがちなミスを未然に防ぎ、サイトが真っ白になってしまう。というトラブルを防止します。
　
このエラー表示は捉え方を変えると、phpを学びながら調べもってコードが作れます。
　
つまり、ここでphpコードを作れるようになれば、functions.phpに直接手を加えられるようになり、初心者から脱却できる。とも言えるわけです。
　
　

ヘッダーからフッターに変更する

Googleアドセンスをショートコード化しましたが、サンプルとして用意されているcssとJavaScriptの登録の仕方としては、ヘッダーに追加する仕様になっています。
　
サンプルにadd_actionの後に『wp_head』という文字があると思います。

　
　
これはヘッダーに表示するためのタグで、テーマの中のheader.phpにある wp_head に、cssやJavaScriptのリンク情報やコードを載せるために存在しています。

　
　
JavaScriptですが、こんな風にヘッダーに出力されます。

　
　
サンプルの型を使い、自作のcssやJavaScriptを加えることで、ヘッダーに表示させることができます。wp_headではなく、wp_footerに変更してやれば、footer.phpにある wp_footer に、code snippetsに登録したコードを表示させることができるということです。
　
　
つまり、この型をfuntions.phpに加えれば、ヘッダーやフッターに自作のコードを表示させることができるのです。多少なりとも、phpの知識をつける必要がありますが、学んでおくと使い勝手のよいプラグインです。
　

フッターにcssやJavaScriptを出力させるのは、サイトの表示スピードを改善させるため。これについてはここでは割愛します。興味があれば、cssをインライン化するのと外部ファイル化する事の違いを覗いて見てください。
　
　
スポンサードリンク