僕のように「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’)?>を挿入します。
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<!--[if IE ]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="profile" href="http://gmpg.org/xfn/11" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php mts_meta(); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
<?php get_template_part('Snow3D')?>
<?php get_template_part('google_web_fonts')?>
<?php get_template_part('TypeSquare')?>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>
これで作業は完了です。
上のスクリーンショットや<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=“テンプレートモジュール名”$>を使用する事により、モジュール化したテンプレートの呼び出しが可能です。