2014.10.10
wordpress

ワードプレスの自作テーマの作成方法・シンプル・レスポンシブ対応 3

index.phpはデフォルトのテンプレートで、最新記事一覧、カテゴリ一覧、404エラーなどのページに使われます。

Memo:
ここでは作成しませんが、category.php、404.phpなどを作るとindex.phpよりも優先されて読み込まれる仕組みになっています。
テンプレート階層

投稿記事、個別記事を表示するにはそれぞれsingle.php、page.phpを作成します。

wp_theme005

Ri-mode Green ワードプレスのテーマ作成用サンプルサイト

の続きです。

single.php

投稿記事を表示するテンプレート。

こちらで作成した、index.phpをコピーして新規ファイルに張り付け、
single.phpとしてri-mode_greenフォルダに保存します。

そして以下のように変更します。

single.php
<?php get_header(); ?>

<div id="content">
   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
     <div class="entry">
       <div class="date"><?php the_time('Y年m月j日') ?></div>
       <h1 class="entry_title"><?php the_title(); ?></h1>
       <div class="category_tag">カテゴリ: <?php the_category(', ') ?>&nbsp; タグ: <?php the_tags('', ', '); ?></div>

       <div class="entry_content">
         <?php the_content(); ?>
       </div><!--.entry_content-->

     </div><!--.entry-->


     <div class="paging">
       <span class="paging_text"><?php previous_post_link( '%link',  '&laquo; 前の記事へ'); ?></span> 
       <span class="paging_text"><?php next_post_link( '%link', '次の記事へ &raquo;'); ?></span>
     </div><!--.paging-->

   <?php endwhile; endif; ?>

</div><!--#content-->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

投稿記事を表示するのにもループを使っています。
また、index.phpではページング部分はループの外でしたが、single.phpではループの中に入れる点に注意です。

page.php

個別ページを表示するテンプレート。
個別ページは、お問い合わせページなど更新するのが目的ではないページに使用します。

上記のsingle.phpををコピーして新規ファイルに張り付け、
page.phpとしてri-mode_greenフォルダに保存します。

個別ページでは必要ない、日付、カテゴリ、タグ、ページング部分を削除して、以下のように変更します。

page.php
<?php get_header(); ?>

<div id="content">
   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
     <div class="entry">
       <h1 class="entry_title"><?php the_title(); ?></h1>

       <div class="entry_content">
          <?php the_content(); ?>
       </div><!--.entry_content-->
     </div><!--.entry-->

   <?php endwhile; endif; ?>

</div><!--#content-->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

個別ページの投稿内容を表示するのにもループを使っています。

これで投稿記事ページと個別ページのテンプレートが出来上がりました。

次はfunctions.phpの作成です。

functions.phpはwordpressに慣れれば慣れるほど便利です。
wordpressの可能性が無限大になるファイルです。

色んな機能を追加したり、制御したりするとき、このfunctions.phpに書き込みます。

4. functions.phpを作成

今回のテーマでは、メニューとウィジェットを使用しましたので、それらを使えるようにするソースをfunctions.phpに記述して使えるようにします。
また、リスポンシブ対応にするため、投稿画面での画像についてwidthとheightを吐き出さないようにするソースもfunctions.phpに合わせて記述します。

新規ファイルを作成して、以下を記述し、functions.phpとしてri-mode_greenフォルダに保存します。

functions.php
<?php
//メニューを使えるようにする
add_theme_support( 'menus' );

//ウィジェットを使えるようにする
register_sidebar( array(
'name' => 'サイドバー',
'id' => 'sidebar01',
'before_widget' => '<div class="widget">',
'after_widget' => '</div><!--.widget--><div class="widget_footer"></div>',
'before_title' => '<div class="widget_title">',
'after_title' => '</div>',
) );

//投稿した画像のwidthとheightを表示しない
function remove_hwstring_from_image_tag( $html, $id, $alt, $title, $align, $size ) {
    list( $img_src, $width, $height ) = image_downsize($id, $size);
    $hwstring = image_hwstring( $width, $height );
    $html = str_replace( $hwstring, '', $html );
    return $html;
}
add_filter( 'get_image_tag', 'remove_hwstring_from_image_tag', 10, 6 );
?>
Memo:

今回のテーマ作成では扱いませんが、アイキャッチ画像を使えるようにしたり、本文抜粋の文字数を変更できたり、ダッシュボードを見やすくカスタマイズしたり、ページやカテゴリによって読み込むCSSやjsを設定したり・・・などなどfunctions.phpで実現できることは本当にたくさんあります。

ここまででテーマ作成は完了です。
最初に作成した、index.htmlは削除し、ri-mode_greenフォルダには、9つのファイルが出来上がりました。

ri-mode_greenフォルダをFTPなどでwp-contentディレクトリ内のthemesディレクトリにアップロードします。

5. ダッシュボードからの設定

ダッシュボード⇒外観⇒テーマでRi-mode Greenのテーマを有効化します。
wp_theme002

次に、ダッシュボード⇒外観⇒メニューで全ページ共通のナビゲーションの設定をします。
wp_theme003
メニューの名前にメインメニューとし保存、その後左側の固定ページ、リンク、カテゴリからメニューに追加したいページを設定します。リンクでは自由にURLが設定できます。

そしてダッシュボード⇒外観⇒ウィジェットでサイドバーに表示するウィジェットを左側から選んで右側のサイドバーにドラッグして設定します。
wp_theme004

はい、以上でワードプレス自作テーマ作成は完了です。
今回はウェブサイトをワードプレスで作成する上で最低限あったら良いと思う機能で作成しました。

シンプルすぎて物足りないかと思いますが、これからワードプレスで自作テーマに挑戦する人のお役に立てれば嬉しいです。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP