ウェブシュフではこれまでカスタムメニューの表示のためだけにウィジェット機能を使ってきました。しかし表示速度が落ちるので、試しに、ウィジェットを使わずカスタムメニューを表示する作業をやってみたときの記録です。
抹消線の理由
この記事は元々2013年2月11日に公開しました。その時点では私自身が「ウィジェットってサイトを重くするんだぜ」と信じて疑わなかったのですが、もはやそうでもないことが明らかになったので抹消しました。
それを教えてくれたのが@HissyNCさんです。
@web_shufu ウィジェットにした方が速くなるよ
— Takuro Hishikawa (@HissyNC) 2013, 12月 10
@web_shufu うろおぼえですけど最近のバージョンの標準ウィジェットは高速化のためにキャッシュされてるんですよ縲怐Bプラグインのウィジェットによってはキャッシュされてないし重くなるかも
— Takuro Hishikawa (@HissyNC) 2013, 12月 10
https://twitter.com/HissyNC/status/410285396757458944
@web_shufu 改めてソースコード確認してみると、キャッシュしてるのは最近の投稿ウィジェットと最近のコメントウィジェットだけでした…。中途半端…
— Takuro Hishikawa (@HissyNC) 2013, 12月 10
@web_shufu カスタムメニューとかカテゴリーとかは、ウィジェットじゃなくてそれぞれの内部でキャッシュ持ってたりします。でもまあ、それでも遅くなるんですよね。だから高速化は一筋縄ではいかないです
— Takuro Hishikawa (@HissyNC) 2013, 12月 10
ウィジェットはキャッシュされています。ウィジェットを外すことでえられる高速化の効果はそんなに高くなさそうです。
抹消線を書いた理由は以上です。
カスタムメニューとは
カスタムメニューはドラッグ＆ドロップで簡単に作成できるメニューリストのことです。
たいていのテーマで使える機能で、TwentyTwelveではもちろん使えます。
管理画面の左サイドバーで「外観」→「メニュー」と進むと作成できます。
カスタムメニュー作成と、ウィジェットを利用したサイドバーへのカスタムメニュー表示については、次の記事に詳しいです。
WordPress カスタムメニューの使い方（その1：基本）: 小粋空間
TwentyElevenを題材にしていますが、TwentyTwelveでも通用するノウハウです。
ウィジェットの長所と短所
@web_shufuも上記の小粋空間さんの記事を参考に、サイドバーにカスタムメニューを表示させていました。
ウィジェットを使って表示させる場合、テーマファイルをいじる必要がないので、とにかく簡単です。これが一番の長所です。
しかし、ウィジェットを使うと、サイトの表示速度が遅くなるという話もあったりします。
表示速度が遅いと、訪問者の利便性を害しますし、SEO的にもよくありません。
そこで、今回ウィジェットの使用を全廃しつつも、ウィジェットを使用したときと同様の内容をサイドバーに表示するべく作業しました。
作業着手前の状況
ウェブシュフでは、サイドバーのウィジェットは以下のように組んでいました。
「sidebar」という名のカスタムメニューを表示するためだけにウィジェットを使っています。
まず、ソースコピペ
まず、ウィジェットの使用をやめる前に、サイトの任意の1ページを表示させ、サイドバー部分のHTMLソースをコピーしておきます。
TwentyTwelveを利用している場合は以下のような部分です。
<div id="secondary" class="widget-area" role="complementary">
・・・・・・・・
・・・・・・・・
・・・・・・・・
</div><!-- #secondary -->
次に、sidebar-2.phpを作成し、コピーしておいたHTMLを貼り付けます。
HTMLのメニューリストをwp_nav_menuに置き換え
HTMLの中で
<div class="menu-（カスタムメニューの名前）-container">
・・・・・・・・
・・・・・・・・
</div>
を
<?php wp_nav_menu( array('menu' => '（カスタムメニューの名前）' )); ?>
に置き換えてください。
終点の</div>は、<div class=”menu-sidebar-container”>のあと最初に出てくる</div>なので、見落とさないでください。
sidebarテンプレートを入れ替え
サイドバーのテンプレートとして、sidebar.phpではなく、今作ったばかりのsidebar-2.phpを使うように設定します。
使用しているテンプレートファイルで
<?php get_sidebar(); ?>
を
<?php get_sidebar(2); ?>
に置き換えます。
あとは、書き換えたテンプレートファイルを全てFTPアップロードすれば作業完了です。
最後に
見かけは変わりませんが、サイトの高速化のためにはウィジェットは使わないにこしたことがありません。
カスタムメニューの表示のためだけにウィジェットを使っているのなら、上記方法でウィジェットの使用をやめるといいと思います。
抹消線部分は以前は正しかったのですが今は違います。
キャッシュのおかげでウィジェットもそんなに重くないので、必要なら使っていけばいいみたいです。