2014.10.09
wordpress

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

wp_theme005

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

こちら(ワードプレスの自作テーマの作成方法・シンプル・レスポンシブ対応)の続きです。

wordpressで作成したウェブサイトは1つのページに色々なパーツを読み込んで作られています。
ヘッダーやフッターなど全てのページに共通する部分はパーツとしてあらかじめ作っておいて、各ページに読み込んでいます。

なのでHTMLだけで作成したウェブサイトと違い、ヘッダー部分を修正すれば、すべてのページのヘッダーに反映されるので作業効率が良いのが特徴です。

3. HTMLを分割してPHPファイルに

PHPで作成しますが、PHPの知識がなくても大丈夫です。
wordpress独自のタグがあるので、それを作成したHTMLから置き換えていきます。

Attention!! 保存するときは全て文字コードをUTF8にすることを忘れずに。

header.php

HTMLファイルの以下の部分をコピーして新規ファイルに張り付け、
header.phpとしてri-mode_greenフォルダに保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>タイトル</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
  <div id="header_line"></div>
  <h1 id="top_title"><a href="#">ブログのタイトル</a></h1>
  <div id="top_catch">ブログのキャッチフレーズ</div>
</div><!--#header-->

<div id="menu">
  <ul>
     <li><a href="#">ホーム</a></li><li><a href="#">人気の記事</a></li><li><a href="#">サイトについて</a></li><li><a href="#">お問い合わせ</a></li>
  </ul>
</div><!--#menu-->

<div class="wrap">

これをwordpress独自のタグに入れ替えていきます。

例えば、

<title>タイトル</title>

<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>

のように変更していきます。

wordpressで用意されたテンプレートタグは本当にたくさんあります。
特に覚えなくてもOKです。

ワードプレスのテンプレートについて: テンプレートタグ

では、上記のHTMLを下記のように変更して保存します。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
<?php wp_head(); ?>
</head>

<body>
<div id="header">
   <div id="header_line"></div>
   <?php if(is_single() || is_page()): ?>
     <div id="top_title"><a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></div>
   <?php else : ?>
     <h1 id="top_title"><a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
   <?php endif ; ?>
     <div id="top_catch"><?php bloginfo('description'); ?></div>
</div><!--#header-->

<div id="menu">
   <?php wp_nav_menu( array('menu' => 'メインメニュー' )); ?>
</div><!--#menu-->

<div class="wrap">

wordpressがきちんと機能するためには、header.phpの</head>の直前に

<?php wp_head(); ?>

は必須ですので忘れないように記述します。

14行目は条件分岐
ここでは説明しませんが、これが使えるようになるとwordpressでウェブサイトを作るときに幅が広がります。

23行目のメニュー部分については後述します。

同じ要領で他のファイルも作成していきます。

footer.php

HTMLファイルの以下の部分をコピーして新規ファイルに張り付け、
footer.phpとしてri-mode_greenフォルダに保存します。

</div><!--.wrap-->

<div id="footer">
   <div id="copyright">Copyright &copy; Ri-mode Rainbow. All Rights Reserved.</div>
</div><!--#footer-->
</body>
</html>

下記のように変更。

footer.php

</div><!--.wrap-->

<div id="footer">
   <div id="copyright">Copyright &copy; Ri-mode Rainbow. All Rights Reserved.</div>
</div><!--#footer-->

<?php wp_footer(); ?>
</body>
</html>

今回作成のテンプレートではfooter.phpはほとんど変化なしです。
header.php同じ要領で、footer.phpの</body>の直前に

<?php wp_footer(); ?>

を必ず記述します。

sidebar.php

HTMLファイルの以下の部分をコピーして新規ファイルに張り付け、
sidebar.phpとしてri-mode_greenフォルダに保存します。

  <div id="side">
     <div id="side_in">
     
        <div class="widget">
           <div class="widget_title">最新記事</div>
           <ul>
              <li><a href="#">記事タイトル1</a></li>
              <li><a href="#">記事タイトル2</a></li>
              <li><a href="#">記事タイトル3</a></li>
              <li><a href="#">記事タイトル4</a></li>
              <li><a href="#">記事タイトル5</a></li>
           </ul>
        </div><!--.widget-->
        <div class="widget_footer"></div>

        <div class="widget">
           <div class="widget_title">カテゴリ</div>
           <ul>
              <li><a href="#">カテゴリ1</a></li>
              <li><a href="#">カテゴリ2</a></li>
              <li><a href="#">カテゴリ3</a></li>
           </ul>
        </div><!--.widget-->
        <div class="widget_footer"></div>
        
     </div><!--#side_in-->
  </div><!--#side-->

下記のように変更。

sidebar.php

<div id="side">
   <div id="side_in">

<?php dynamic_sidebar( 'サイドバー' ); ?>

   </div><!--#side_in-->
</div><!--#side-->

サイドバーではウィジェットを使用します。設定は後述します。

header.php、footer.php、sidebar.phpといわゆるパーツが出来上がりましたので、それをメインのファイルに読み込むように記述していきます。

index.php

index.phpはデフォルトテンプレートになります。
HTMLでウェブサイトを作るときのindex.htmlとは意味合いが違いますので最初は慣れないと思いますが、デフォルトというのを頭に片隅に入れておいてください。

HTMLファイルの以下の部分をコピーして新規ファイルに張り付け、
index.phpとしてri-mode_greenフォルダに保存します。

  <div id="content">

     <div class="entry">
       <div class="date">2014年9月13日</div>
       <h2 class="entry_title"><a href="#">記事タイトル</a></h2>
       <div class="category_tag">カテゴリ: <a href="#">ワードプレス</a>&nbsp; タグ: <a href="#">テーマ作成</a></div>
       <div class="entry_content">ここに記事の内容が入ります。</div>
     </div><!--.entry-->

     <div class="entry">
       <div class="date">2014年9月13日</div>
       <h2 class="entry_title"><a href="#">記事タイトル</a></h2>
       <div class="category_tag">カテゴリ: <a href="#">ワードプレス</a>&nbsp; タグ: <a href="#">テーマ作成</a></div>
       <div class="entry_content">ここに記事の内容が入ります。</div>
     </div><!--.entry-->

     <div class="entry">
       <h2 class="entry_title">お探しの記事が見つかりませんでした。</h2>
     </div><!--.entry-->

     <div class="paging">
        <span class="paging_text"><a href="#"><< 次へ</a></span>
        <span class="paging_text"><a href="#">前へ >></a></span>
     </div><!--.paging-->

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

wordpressを使う中で一番ポイントとなるのがループです。
ループで投稿記事の内容を動的に表示しています。

ループの書き方
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

  ここにループで表示する内容

<?php endwhile; else: ?>

  ここに記事が見つからなかったときの内容

<?php endif; ?>

index.phpではこのループ部分が繰り返されるので、記事一覧が出来上がるのです。

ループを入れて、その他必要なタグを入れ替えたのが下記のソースです。

index.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>
       <h2 class="entry_title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?>
</a></h2>
       <div class="category_tag">カテゴリ: <?php the_category(', ') ?>&nbsp; タグ: <?php the_tags('', ', '); ?></div>

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

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

   <?php endwhile; else: ?>

     <div class="entry">
       <h2 class="entry_title">お探しの記事が見つかりませんでした。</h2>
     </div><!--.entry-->
   <?php endif; ?>


   <div class="paging">
     <span class="paging_text"><?php next_posts_link('<< 前へ', 0) ?></span> 
     <span class="paging_text"><?php previous_posts_link('次へ >>') ?></span>
   </div><!--.paging-->

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

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

1行目、32行目、33行目でそれぞれheader.php、footer.php、sidebar.phpを読み込んでいます。

これを保存して、index.phpは完了です。
はsingle.phpとpage.phpを作成します。

関連する記事

コメントをどうぞ

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


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

*


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