Wordpress テーマはウィジェット・メニューを使って柔軟に #PHP

概要

Wordpress で作ったサイトをできるだけ管理画面で編集できるようにすることで、運用を楽にすることができます。
特にサイト構築と運用を別の人が行う場合に便利です。

テーマを作る時の一工夫というか、Wordpress の機能を使ったらよかったねという備忘録です。

メニューはメニューで作る

header.php にべた書きせず、wp_nav_menu を使い、管理画面から編集できるようにします。
個々のページは固定ページとして作成します。

header.php

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="<?=get_template_directory_uri(); ?>/style.css"></script>
</head>
<body>
<div class="container_12">
  <header class="grid_12">
    <? wp_nav_menu(); ?>
  </header>
  <div id="content">

トップページはウィジェットで構成する

dynamic_sidebar を使い、管理画面から編集できるようにします。

テキスト等のウィジェットを組み合わせてトップページを作ることで、一時的な告知をトップページに載せたいときなどに便利です。

また、Widget CSS Classes プラグインを使ってレイアウトを制御します。グリッドシステムを使っている場合は、grid_6 などと指定してウィジェットだけできれいなレイアウトを作ることが出来ます。

functions.php

<?
add_theme_support('menus');

register_sidebar(array(
  'name' => 'トップページウィジェット',
  'id' => 'index-widget',
  'before_widget' => '<div class="widget %2$s">',
  'after_widget' => '</div>',
));

index.php

<? 
get_header();
dynamic_sidebar('index-widget');
get_footer();

同様に、footer.php もウィジェットを使います。

footer.php

  </div>
</div>
<footer class="container_12">
  <? dynamic_sidebar('footer-widget');　?>
</footer>
</body>
</html>

以下を functions.php に追記します

functions.php

register_sidebar(array(
  'name' => 'ページ下部ウィジェット',
  'id' => 'footer-widget',
  'before_widget' => '<div class="footer widget %2$s">',
  'after_widget' => '</div>',
));