第2回は投稿したblog記事のページの見た目を2カラムにするというカスタマイズです。
ちなみに、blog記事のページは、WordPressの管理画面(外観>編集)では「単一記事(single.php)」と呼ばれています。
さて、第1回目の投稿記事を見てみると…。
デフォルトの記事ページ
こんな感じで1カラムで表示されています。
このままだと、メニューが表示されなくて不便なので、カラムを増やしてサイドバーを追加したいと思います。
単一記事のページには single.php が使用されています。
この single.php ファイルを開くと先頭が以下のように記述されています。
<?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” に変更します。
変更前：
<?php get_header(); ?> <div id="content" class="widecolumn">
変更後：
<?php get_header(); ?> <div id="content" class="narrowcolumn">
次に、7行目にある <div class="navigation"> 〜 </div> までのコードを移動します。
移動先は、single.php の最終行あたりにある <?php endif; ?> の真下になります。
変更前：
<?php endif; ?> </div> <?php get_footer(); ?>
変更後：
<?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(); ?>
最後に、サイドバーを呼び出すために <? php get_sidebar(); ?> を以下のように追加します。
変更後：
<?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カラムになってサイドバーに設定していたメニュー等も表示されるようになりました。
今回は(前回長くなりすぎたので)ここまで…。
関連する記事:
感謝！