【もはやそれほど高速化しません】wp_nav_menuでウィジェットを使わずサイドバーにカスタムメニューを導入

更新

WordPress
ウェブシュフではこれまでカスタムメニューの表示のためだけにウィジェット機能を使ってきました。しかし表示速度が落ちるので、試しに、ウィジェットを使わずカスタムメニューを表示する作業をやってみたときの記録です。

抹消線の理由

この記事は元々2013年2月11日に公開しました。その時点では私自身が「ウィジェットってサイトを重くするんだぜ」と信じて疑わなかったのですが、もはやそうでもないことが明らかになったので抹消しました。

それを教えてくれたのが@HissyNCさんです。

https://twitter.com/HissyNC/status/410285396757458944

ウィジェットはキャッシュされています。ウィジェットを外すことでえられる高速化の効果はそんなに高くなさそうです。

抹消線を書いた理由は以上です。

カスタムメニューとは

カスタムメニューはドラッグ&ドロップで簡単に作成できるメニューリストのことです。

たいていのテーマで使える機能で、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.phpではなく、今作ったばかりのsidebar-2.phpを使うように設定します。

使用しているテンプレートファイルで

  <?php get_sidebar(); ?>

  <?php get_sidebar(2); ?>

に置き換えます。

あとは、書き換えたテンプレートファイルを全てFTPアップロードすれば作業完了です。

最後に

見かけは変わりませんが、サイトの高速化のためにはウィジェットは使わないにこしたことがありません。

カスタムメニューの表示のためだけにウィジェットを使っているのなら、上記方法でウィジェットの使用をやめるといいと思います。

抹消線部分は以前は正しかったのですが今は違います。

キャッシュのおかげでウィジェットもそんなに重くないので、必要なら使っていけばいいみたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です