WordPressはメインインデックスのテンプレート (index.php)を直接編集すればトップページを自由にカスタマイズできる

2014.04.19
この記事は約9分で読めます。

sobasindanorgWordPressのトップページを簡単にカスタマイズした。
トップページにサイトの紹介文を挿入したかったのだが、適当なプラグインがなく、メインインデックスのテンプレート (index.php)を直接編集することにした。WordPressの管理画面（ダッシュボード）から、外観→テーマの編集をクリックするとテンプレートファイルが一覧される画面になる。その中から「メインインデックスのテンプレート (index.php)」を選択しクリックするとトップページを編集することができる。失敗するとトップページがうまく表示できなくなってしまうので、バックアップをとってから行うのがいい。

index.phpを直接編集する

▼「蕎麦食べ歩き北陸」のメインインデックスのテンプレート (index.php)
メインテンプレートに追加した説明文

カスタマイズしたのは一箇所のみ。

<?php endif; ?>と</div> <!– end #main –>の間に挿入した。

以下は挿入したhtmlソース内容

<?php endif; ?>

<!– 遠田幹雄Google+顔写真ここから –>
<div class=”sharedaddy sd-block sd-social sd-gplus”>
Google+
<div class=”sd-content”><a href=”https://plus.google.com/+遠田幹雄tohdamikio”><img src=”https://lh4.googleusercontent.com/-f7_Z1KfeAzU/AAAAAAAAAAI/AAAAAAAABLo/CfXFRa1JEN4/photo.jpg?sz=40″ alt=”遠田幹雄” width=”20″ height=”20″ align=”absmiddle” /> </a><a rel=”author” href=”https://plus.google.com/+遠田幹雄tohdamikio” class=”gplus-profile”>遠田幹雄</a><span class=”g-follow-wrapper”><span class=”g-follow” data-href=”https://plus.google.com/+遠田幹雄tohdamikio” data-rel=”author” data-height=”15″></span></span></div></div>
この「蕎麦食べ歩き北陸」というブログは遠田幹雄が一人で写真を撮影し主観で記事を書いています。<br />
【特徴と傾向】本人はベジタリアンで肉と魚を食べません。鰹節が苦手で蕎麦屋では外してもらっています。鰹が強いダシは香りが強すぎて苦手なため、鰹が効いた出汁は使いません。大根おろし汁で食べるおろし汁蕎麦が一番の好みですが、醤油系のかえしや塩だけで食べる蕎麦も好きです。また、蕎麦は太めで香り高いものが好きで、蕎麦の香りをじゃまするような種物はあまり一緒に注文しません。<br />
そのような理由から、このWEBサイトの写真は「鰹節なし」「ダシなし」の蕎麦だけのものが中心です。偏った情報に見えるかもしれませんがご容赦願います。<br />
※遠田幹雄公式ブログには「蕎麦カテゴリ」もあります。蕎麦好きの方は<a href=”/goods/soba/”>遠田幹雄BLOGの蕎麦カテゴリ</a>もご覧になってみてほしいです。<br />
このWEBサイトと連携している<a href=”http://www.facebook.com/sobasuki” rel=”nofollow” target=”_blank”>蕎麦食べ歩き北陸のフェイスブックページ</a>にも蕎麦情報があります。<br />
<!– Google+顔写真ここまで –>

</div> <!– end #main –>

WordPressはこのようなカスタマイズが簡単にできるのがいい。
注意しないといけないのは、

  • カスタマイズする前のソース内容をテキストエディタなどでバックアップをとっておくこと
  • 表示確認を行う際にキャッシュをとるページ表示高速化のためのプラグインをオフにすること
  • 使用しているデザインテーマをバージョンアップするとカスタマイズ内容が消えてしまうこと

である。

使用しているデザインテーマをバージョンアップするとカスタマイズ内容が消えてしまうのは盲点で、更新してしまったあとにしまったということになりかねない。テンプレートを編集するときは、編集前と編集後の両方のソースをテキストエディタなのでバックアップしておこう。

その後、ソーシャルボタンをまとめて表示するように追加修正した。

<!– 遠田幹雄　トップページ用ソーシャルボタンここから –>
<div class=”sharedaddy sd-block sd-social sd-gplus”>
Google+
<div class=”sd-content”><a href=”https://plus.google.com/+遠田幹雄tohdamikio”><img src=”https://lh4.googleusercontent.com/-f7_Z1KfeAzU/AAAAAAAAAAI/AAAAAAAABLo/CfXFRa1JEN4/photo.jpg?sz=40″ alt=”遠田幹雄” width=”20″ height=”20″ align=”absmiddle” /> </a><a rel=”author” href=”https://plus.google.com/+遠田幹雄tohdamikio” class=”gplus-profile”>遠田幹雄</a><span class=”g-follow-wrapper”><span class=”g-follow” data-href=”https://plus.google.com/+遠田幹雄tohdamikio” data-rel=”author” data-height=”15″></span></span></div></div>
この「蕎麦食べ歩き北陸」というブログは遠田幹雄が一人で写真を撮影し主観で記事を書いています。<br />
【特徴と傾向】本人はベジタリアンで肉と魚を食べません。鰹節が苦手で蕎麦屋では外してもらっています。鰹が強いダシは香りが強すぎて苦手なため、鰹が効いた出汁は使いません。大根おろし汁で食べるおろし汁蕎麦が一番の好みですが、醤油系のかえしや塩だけで食べる蕎麦も好きです。また、蕎麦は太めで香り高いものが好きで、蕎麦の香りをじゃまするような種物はあまり一緒に注文しません。<br />
そのような理由から、このWEBサイトの写真は「鰹節なし」「ダシなし」の蕎麦だけのものが中心です。偏った情報に見えるかもしれませんがご容赦願います。<br />
※遠田幹雄公式ブログには「蕎麦カテゴリ」もあります。蕎麦好きの方は<a href=”/goods/soba/”>遠田幹雄BLOGの蕎麦カテゴリ</a>もご覧になってみてほしいです。<br />
このWEBサイトと連携している<a href=”http://www.facebook.com/sobasuki” rel=”nofollow” target=”_blank”>蕎麦食べ歩き北陸のフェイスブックページ</a>にも蕎麦情報があります。<br />
<div class=’wp_social_bookmarking_light’><div class=”wsbl_hatena_button”><a href=”http://b.hatena.ne.jp/entry/https://sindan.org/” class=”hatena-bookmark-button” data-hatena-bookmark-title=”蕎麦の食べ歩き北陸「蕎麦屋一覧」” data-hatena-bookmark-layout=”standard” title=”このエントリーをはてなブックマークに追加”> <img src=”/img//b.hatena.ne.jp/images/entry-button/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”/img//b.hatena.ne.jp/js/bookmark_button.js” charset=”utf-8″ async=”async”></script></div><div class=”wsbl_twitter”><iframe allowtransparency=”true” frameborder=”0″ scrolling=”no” src=”/img//platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fsoba.sindan.org&amp;text=蕎麦の食べ歩き北陸「蕎麦屋一覧」&amp;via=tohdamikio&amp;lang=ja&amp;count=horizontal” style=”width:130px; height:20px;”></iframe></div></div><br class=’wp_social_bookmarking_light_clear’ /><br />
<p style=”clear: left”>　</p>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=157596214302833″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-href=”http://soba.sindan.org” data-layout=”standard” data-action=”like” data-show-faces=”true” data-share=”true”></div>
<div class=”fb-comments” data-href=”http://soba.sindan.org” data-numposts=”5″ data-colorscheme=”light”></div>

<!– トップページ用ソーシャルボタンここからここまで –>