第2回は投稿したblog記事のページの見た目を2カラムにするというカスタマイズです。
ちなみに、blog記事のページは、WordPressの管理画面(外観>編集)では「単一記事(single.php)」と呼ばれています。
さて、第1回目の投稿記事を見てみると…。
デフォルトの記事ページ
こんな感じで1カラムで表示されています。
このままだと、メニューが表示されなくて不便なので、カラムを増やしてサイドバーを追加したいと思います。
単一記事のページには single.php が使用されています。
この single.php ファイルを開くと先頭が以下のように記述されています。
1 2 3 4 5 6 7 8 9 10 | <?php get_header(); ?> <div id="content" class="widecolumn"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="navigation"> <div class="alignleft"><?php previous_post_link(‘« %link’) ?></div> <div class="alignright"><?php next_post_link(‘%link »’) ?></div> </div> |
上記のソースコードを書き換えます。
まずは、3行目にある div の class=”widecolumn” を class=”narrowcolumn” に変更します。
変更前:
1 2 3 | <?php get_header(); ?> <div id="content" class="widecolumn"> |
変更後:
1 2 3 | <?php get_header(); ?> <div id="content" class="narrowcolumn"> |
次に、7行目にある
1 | <div class="navigation"> 〜 </div> |
までのコードを移動します。
移動先は、single.php の最終行あたりにある
1 | <?php endif; ?> |
の真下になります。
変更前：
60 61 62 63 64 | <?php endif; ?> </div> <?php get_footer(); ?> |
変更後：
60 61 62 63 64 65 66 67 68 69 | <?php endif; ?> <div class="navigation"> <div class="alignleft"><?php previous_post_link(‘« %link’) ?></div> <div class="alignright"><?php next_post_link(‘%link »’) ?></div> </div> </div> <?php get_footer(); ?> |
最後に、サイドバーを呼び出すために
1 | <? php get_sidebar(); ?> |
を以下のように追加します。
変更後:
60 61 62 63 64 65 66 67 68 69 70 71 | <?php endif; ?> <div class="navigation"> <div class="alignleft"><?php previous_post_link(‘« %link’) ?></div> <div class="alignright"><?php next_post_link(‘%link »’) ?></div> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
変更した single.php を適用してみると…。
2カラム変更後
無事、2カラムになってサイドバーに設定していたメニュー等も表示されるようになりました。
今回は(前回長くなりすぎたので)ここまで…。
感謝！