サイトアイコン 日々の気づきを共有しよう!!

カンタンWordPressカスタマイズ手法

僕のように「HTMLとCSS、少しは解ります。」というレベルの者にとって、WordPressのカスタマイズは、ちょっと敷居が高い。

ソーシャルメディアの共有ボタン設置等、ブログの機能強化を図るためのコードは、ネット上に数多く紹介されています。
そしてほとんどの場合、そのコードをしかるべき所にコピペすれば、たとえコードの読み書きが出来なくても目的を達成する事が出来る。
しかしコードを挿入して暫く時が経つと、何処にどんなコードを入れたのかさっぱり解らなくなってしまう事が多い。
こういう状態だと、挿入したコードの削除すら、おそろしくて出来なくなってしまいます。
そこで僕の場合、挿入したいコードをモジュール(パーツ)化してテンプレートとして登録し、挿入すべき所で呼び出すという手法を使っています。
この方法だと、何処にどんなコードを入れたのか解らなくなってしまう事は、まずありません。

その手法を、「ブログに雪を降らせてみた」事を例に、具体的に紹介します。

季節外れの例ですがこれを応用して、今現在はブログに桜を舞い散らせています。

さて必要なファイルやコードですが、JUMP-UP.INFOさんの「3Dで雪を降らせるJava Script「Snow in 3D」を設置してみた」から入手します。

(1)まず最初に、紹介されている「必要ファイル3つ」(Snow.jsとThreeCanvas.jsと、降らせる雪の画像ファイル)を、サーバ上の今使っているWordPressテーマのテンプレートと同じ階層にアップロードします。当ブログの場合はpointというテーマを使用していますので、/wp-content/themes/pointにアップロードしました。

(桜を舞い散らせる場合は、雪の画像を桜の画像と差し替える)

(2)挿入するコードは「JSファイルの呼び出しのための記載」と「Snow in 3D用cssの追加」と「Snow in 3Dの設定に関する記載」の3つです。これらのコードを「Snow in 3D用cssの追加」、「JSファイルの呼び出しのための記載」、「Snow in 3Dの設定に関する記載」の順で、miなどのテキストエディタにコピペします。

(3)合計134行のコードになりますが、これをテキストエンコーディング「UTF-8」改行コード「CR+LF(Windows)」に設定し、「Snow3D.php」というファイル名で保存します。

(4)そしてこの「Snow3D.php」を、サーバ上のWordPressテーマのテンプレートと同じ階層にアップロードします。

使用しているテーマのテンプレートと同じ階層にアップロードする事により、WordPress管理画面の「外観」>「テーマ編集」の所に、コードがテンプレートとして登録されます。

以降、この画面から「Snow3D.php」を管理、編集する事が出来ます。

(5)コードの編集が必要なのは3カ所。Snow.jsとThreeCanvas.jsと、降らせる雪の画像ファイルのURLを、自分のアップロード先URLに変更に変更します。

(6)次にヘッダー部分(<head>~</head>の間)に、「Snow3D.php」を呼び出すコードを記述します。

WordPressでは「テーマ編集」に登録したテンプレートを呼び出すテンプレートタグとして、

<?php get_template_part(‘テンプレートファイル名’)?>

が用意されています。

このテンプレートタグを用いて、ヘッダー(header.php)内の<head>~</head>の間に

<?php get_template_part(‘Snow3D.php’)?>を挿入します。

&lt;head&gt;
&lt;meta charset=&quot;&lt;?php bloginfo('charset'); ?&gt;&quot;&gt;
&lt;!-- Always force latest IE rendering engine (even in intranet) &amp; Chrome Frame --&gt;
&lt;!--[if IE ]&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
&lt;script src=&quot;http://css3-mediaqueries-     js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
&lt;link rel=&quot;profile&quot; href=&quot;http://gmpg.org/xfn/11&quot; /&gt;
&lt;title&gt;&lt;?php wp_title( '|', true, 'right' ); ?&gt;&lt;/title&gt;
&lt;?php mts_meta(); ?&gt;
&lt;link rel=&quot;pingback&quot; href=&quot;&lt;?php bloginfo( 'pingback_url' ); ?&gt;&quot; /&gt;
&lt;?php wp_head(); ?&gt;
&lt;?php get_template_part('Snow3D')?&gt;
&lt;?php get_template_part('google_web_fonts')?&gt;
&lt;?php get_template_part('TypeSquare')?&gt;
&lt;link rel=&quot;icon&quot; href=&quot;./favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;
&lt;link rel=&quot;shortcut icon&quot; href=&quot;./favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;
&lt;/head&gt;

これで作業は完了です。

上のスクリーンショットや<head>~</head>のコードから解りますように、モリサワのWebフォントサービス「TypeSquare」のプラン専用タグも、同様の手法でコード挿入しています。

この手法を用いる事により、個々のコード編集がWordPress管理画面の「外観」>「テーマ編集」から可能になり、これを<?php get_template_part(‘テンプレートファイル名’)?>で、挿入すべき場所から呼び出す事が出来るようになります。

また「Snow3D.php」のように、コードをモジュール化したテンプレートのファイル名を解りやすいものとする事により、<?php get_template_part(‘テンプレートファイル名’)?>により挿入されているコードが何なのか、一目で解るようになります。

追加したコードの削除は<?php get_template_part(‘テンプレートファイル名’)?>を削除するだけ。これなら誤って対象外のコードを削除するような事は無くなります。

また、一時的にコードの機能を停止したい時は、<?php get_template_part(‘テンプレートファイル名’)?>を<?php //get_template_part(‘テンプレートファイル名’)?>として、コメントアウトしておきます。これなら必要になれば簡単に復活する事が出来ます。

以上はWordPressでのカスタマイズ手法ですが、MovableTypeではテンプレートタグ<$MTInclude module=“テンプレートモジュール名”$>を使用する事により、モジュール化したテンプレートの呼び出しが可能です。

モバイルバージョンを終了