WordPressオリジナルテーマでブログサイトをつくる

WEBデザイン

WordPressでブログサイトを作成した時の手順のメモです。この記事ではトップページ、投稿ページ、アーカイブページ、固定ページを作成します。

私はphpやWordpress独自の関数があまり得意ではないのですが、それでも色々な記事を参照しながらオリジナルテーマが作成できました。
メモと復習を兼ねてまとめていきます。

ブログサイトと、企業のホームページのようなブログを載せないサイトでは少し作り方が違ってくるようなので、それはまた別の記事で書けたらいいなと思います。

以下の手順で作成していきます。
作成に入る前に、レンタルサーバーの準備やテスト環境（local環境）が必要なのであらかじめ準備しておきます。

＜事前準備＞
・レンタルサーバーを準備する
・テスト環境（local環境）をつくる

スポンサーリンク

目次

スポンサーリンク

テーマの作成と適用

ブログサイト作成に必要なページ

まずはlocal環境でhtmlとcssでサイトのデザインを作成してから、phpを組み込んでWordpressのテーマ化をしていきます。

テーマフォルダを作成する場所は、/MAMP/htdocs/[localのサイト名]/wp-content/themes/です。Macの場合はアプリケーションフォルダにMAMPフォルダが入っています。

例としてthemesフォルダの配下に「newtemplate」のテーマを作成します。

今回は以下のイメージのようなサイトを作ると想定します。

WordPressでテーマを作成するために最低限必要なトップページ（index.php）とstyle.css。

それ以外にブログの投稿ページ（single.php）、プロフィール用の固定ページ（page.php）、投稿のアーカイブ＆カテゴリページ（archive.php）を作成します。
投稿ページではない、ペライチのページは固定ページにあたります。
投稿のアーカイブ＆カテゴリページは、archive.phpとcategory.phpに分ける場合もあるそうですが今回はひとつにしました。

また、ヘッダー・フッター・サイドメニューは共通部分としてパーツ化するので、header.php、footer.php、sidebar.phpを作成します。
グローバルナビ・カテゴリー・最近の記事は、ワードプレスのウィジェットという機能を使用します。

style.cssの作成

作成したCSSファイルの冒頭にテーマ名などの情報を追加します。テーマ名、URLはそれぞれ自分のサイトのものを記入します。

/*
Theme Name: newtemplate
Theme URI: http://www.mydomein.com/
*/

index.phpの作成

オリジナルテーマとして作成していたトップページのファイルがindex.htmlの場合はindex.phpに変更します。

（メモ）
WordPressのトップページとして認識されるファイル名はindex.php、front-page.php、home.phpの3種類があり、index.phpはページに該当するファイルがなかった場合のテンプレートファイルとしても扱われるそうです。
（例：プロフィール用固定ページを表示するときにpage.phpがなかった場合はindex.phpが適用される。今回はindex.phpをトップページにしているので、トップページが表示されるということ）

パスをワードプレスの関数に書き換える

あらかじめ作成したhtmlの画像やcss、jsのパスをワードプレス用の関数<?php echo get_template_directory_uri(); ?>に書き換えます。これを入れることで自動でパスを取得してくれます。

<img src=“image/image.jpg”>
↓
<img src=“<?php echo get_template_directory_uri(); ?>/image/image.jpg”>

local環境にオリジナルテーマを適用する

ここまでできたら、いったんlocal環境に自分の作成したテーマを適用して、表示を確認しながら作業していきます。オリジナルテーマが/wp-content/themes/にあることを確認したら、Wordpress管理画面の左メニュー「外観」＞「テーマ」からオリジナルテーマを適用します。

サイトを表示してみて、トップページの画像とcssがうまく表示できていたらOK。

管理画面用のワードプレス関数（wp_head、wp_footer）を挿入

次に、index.phpの<head>の手前と</body>の手前に管理画面用のワードプレス関数<?php wp_head(); ?>と<?php wp_footer(); ?>を挿入します。

<?php wp_head(); ?>
<head>
<body>
...
<?php wp_footer(); ?>
</body>

ページを表示してみて、ヘッダー上部に黒いワードプレス管理画面の帯が表示されていればOK。

ファイルの分割

ヘッダー・フッター・サイドバーを共通パーツ化していきます。

まず新規ファイルでheader.php、footer.php、sidebar.phpを作成します。中身は空っぽで大丈夫です。

header.php

全ページにヘッダーとして共通させたい部分までをheader.phpのパーツとします。

今回の例の場合はヘッダーとグローバルナビを全ページ共通としたいのでhead・ヘッダー・グローバルナビまでをheader.phpに貼り付けます

<!-- ここから切り取る -->
<head>
　head内の要素
<?php wp_header(); ?>
</head>
<body>
<header>
　ヘッダー内の要素
</header>
<nav>
　グローバルナビの要素
</nav>
<!-- ここまで切り取る -->
...
...
</body>

空っぽになったindex.phpのヘッダー部分には、header.phpを呼び出す関数<?php get_header(); ?>を挿入します。

<?php get_header(); ?>
...
...
</body>

index.phpを表示してみて、ヘッダーが表示されていればOKです。

footer.php

同様にfooter.phpも作成していきます。共通フッターにしたい部分をindex.phpから切り取り、footer.phpに貼り付けます。

...
<!—- 以下を切り取り —->
<footer>
　フッターの要素
</footer>
<?php wp_footer(); ?>
</body>
</HTML>

そして、index.phpのフッター部分にはfooter.phpを呼ぶ関数<?php get_footer(); ?>を追加します。

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

index.phpを表示してみて、フッターが表示されていればOKです。

sidebar.php

サイドバーにしたい部分をindex.phpから切り取り、sidebar.phpに貼り付けます。1カラムサイトなど、サイドバーを使わない場合は不要です。

...
<!-- ここから貼り付け -->
<div class=“sidebar”>
　サイドバーの要素
</div>
<!-- ここまで貼り付け -->
...

index.phpの切り取った部分にサイドバーを読み込む関数<?php get_sidebar(); ?>挿入します。

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

index.phpを表示してみて、サイドバーが表示されていればOKです。
今回の例ではウィジェットを使用して最新の投稿などを表示するので、それは後述のウィジェットとアイキャッチ画像を入れるで。

投稿ページとトップページの投稿一覧の作成

ブログを投稿するページのテンプレート（page.php）と、トップページに掲載する記事一覧を作成していきます。

single.php

ヘッダーやフッターは共通なので、index.phpをコピーしてsingle.phpを作成します。

WordPress管理画面で書いたブログを反映するワードプレス関数を入れていきます。
タイトル、記事内容、日付やサムネイル画像などです。

<?php get_header(); ?>

<section class="content-area">
  <div class="site_main">

    <section class="content">
      <?php
        if ( have_posts() ) :
        while ( have_posts() ) : the_post();
      ?>
      <div class="blogHeader">
        <h1 class="blogTitle"><?php the_title(); ?></h1>
        <ul>
          <li class="date"><?php the_time('Y.m.j') ?></li>
          <li class="category"><a href="<?php get_category_link( $category_id ); ?>" class="hc"><?php the_category(', ') ?></a></li>
        </ul>
      </div><!-- .blogHeader -->
      <div class="eyecatch">
        <?php if(has_post_thumbnail()) : the_post_thumbnail(); else: ?>
        <img src="<?php echo get_template_directory_uri(); ?>/img/blogImg.jpg" alt="" />
        <?php endif; ?>
      </div>
      <div>
        <?php the_content(); ?>
      </div>
    </section><!-- /.content -->

    <?php endwhile; ?>
    <?php else : ?>
      <h2 class="title">記事が見つかりませんでした。</h2>
    <?php endif; wp_reset_postdata(); ?>

</div><!-- /.site-main -->

<div class="sidebar">
  <?php get_sidebar(); ?>
</div>

</section><!-- /.content-area -->
<?php get_footer(); ?>

それぞれの関数はこのような役割です。

L12. <?php the_title(); ?>記事のタイトルを表示します
L14.<?php the_time (‘Y.m.j’) ?>Y(年).m(月).j(日)を表示します。’Y年m月j日’などでもOK
L15.<?php get_category_link( $category_id ); ?>カテゴリーのリンクを取得します
L15.<?php the_category (‘, ‘) ?>記事のカテゴリーを表示します
L19.<?php if(has_post_thumbnail()) : the_post_thumbnail(); else: ?>…アイキャッチがあれば表示します。なければ続きの<img… />に表示した画像を表示します
L24.<?php the_content(); ?>記事の本文を表示します

ひとつ記事を書いてみて、うまく反映できていればOKです。

index.php

ブログの最新記事を表示するワードプレス関数をindex.phpに挿入します。

ループについて

記事一覧の表示はループといって、記事があるかを確認する→記事があれば表示する仕組みになっています。
そのためループを行うコードと、１記事分のテンプレートを作成します。

<?php get_header(); ?>

<section class="content-area">
  <div class="site_main">

    <div class="content">
      <?php
      if ( have_posts() ) :
      while ( have_posts() ) : the_post();
      ?>
    <article class="post">
      <div class="eyecatch"><a href="<?php echo get_permalink(); ?>">
        <div><?php if(has_post_thumbnail()) : the_post_thumbnail(); else: ?>
            <img src="<?php echo get_template_directory_uri(); ?>/img/blogImg.jpg" alt="" />
            <?php endif; ?>
        </div></a>
      </div>
      <h2 class="blogTitle"><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
      <div class="dateList"><?php the_time('Y.m.j') ?><span class="category"><a href="<?php get_category_link( $category_id ); ?>" rel="category tag"><?php the_category(', ') ?></a></span></div>
      <p class="blogText"><?php the_excerpt(); ?></p>
      <div class="moreBtn"><a href="<?php echo get_permalink(); ?>" class="btn__link">続きを読む ＞</a></div>
    </article>

    <?php endwhile; ?>
    <?php else : ?>
      <h2 class="title">記事が見つかりませんでした。</h2>
    <?php endif; wp_reset_postdata(); ?>

    </div><!-- /content -->
  </div><!-- /site-main -->

<div class="sidebar">
  <?php get_sidebar(); ?>
</div>

</section><!-- .content-area -->

<?php get_footer(); ?>

それぞれの関数はこのような役割です。（single.phpで紹介したものは割愛します）

L12. <?php echo get_permalink(); ?>記事のリンクを取得します
L20.<?php the_excerpt(); ?>記事の抜粋を表示します。デフォルトは55文字です

トップページに表示する記事数はワードプレスの管理画面「設定＞表示設定」から指定できます。

長くなるので省略しましたが、ページネーションはプラグインなどで追加できます。

固定ページの作成

例で示しているプロフィールページなど、ブログ記事以外のページは固定ページ（page.php）で作成します。ブログ記事のようにWordpressの管理画面で作成する方法と、htmlでコーディングしたものをそのまま表示する方法があるので両方記載します。

page.php

WordPress管理画面で固定ページの中身を作成する方法

WordPress管理画面で固定ページの中身を作成する場合は、single.phpとほぼ同じです。single.phpをコピーしてpage.phpを作成します。

管理画面の「固定ページ」から固定ページの中身を作成して完成です。
URLは固定ページの作成画面で設定します。
ちなみに下記は新エディターの例です。旧エディターの場合はタイトルの下にURLの設定箇所が出てきます。

コーディングしたページを固定ページとして作成する方法

「スラッグ付き固定ページ」とよばれるもので、管理画面で作成するよりも自由度の高いページを作成したい場合などは、コーディング済みのphpファイルを使用して作成することができます。

作成済みのファイル名を「page-○○.php」という風にリネームします。例のプロフィールページでいうならpage-profile.phpなどです。

ヘッダーやフッターなどをindex.phpと同じようにワードプレス関数に変更します。

これだけだと実はページが表示されません。
WordPress管理画面の固定ページで新規ページを作成し、本文は空のままタイトルを入力します。

次にURLの編集可能な部分（スラッグ）をpage-○○の○○と同じにします。例の場合はprofileです。編集したら公開し、表示されていればOKです。

下記は新エディターの例です。旧エディターの場合はタイトルの下にURLの設定箇所が出てきます。

アーカイブ・カテゴリ一覧・検索一覧ページの作成

アーカイブページ用のブログの記事一覧を作成します。アーカイブ・カテゴリ・検索結果ページをそれぞれ分けたい場合はarchive.php・category.php・search.phpと分けることができるそうですが、例では共通して使うことのできるarchive.phpのみ作成します。

archive.php

記事一覧を表示するのでindex.phpをコピーしてarchive.phpを作成します。
任意でタイトルなどを入れて、表示されればOKです。

ウィジェットとアイキャッチ画像を入れる

ウィジェットを挿入する

ウィジェットはWordpressのメニュー機能を利用して「最近の投稿」や「月別アーカイブリスト」などを表示することができます。この例の場合はサイドバーに最新の投稿の表示と、グローバルナビにウィジェットメニューを表示します。

functions.phpという、テーマの設定ファイルを作成し、以下を記述します。

<?php
// サイドバーのウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget' ),
     'id' => 'side-widget',
     'before_widget' => '<li class="sidebar_widget">',
     'after_widget' => '</li>',
     'before_title' => '<h3>',
     'after_title' => '</h3>',
) );

// カスタムメニューの定義
if ( ! function_exists( 'lab_setup' ) ) :
function lab_setup() {
	register_nav_menus( array(
		'global' => 'グローバルナビ',
		'header' => 'ヘッダーナビ',
		'footer' => 'フッターナビ',
	) );
}
endif;
add_action( 'after_setup_theme', 'lab_setup' );

?>

header.phpのグローバルナビ箇所にウィジェットを表示するコードを挿入します。theme_locationには、functions.phpでグローバルナビを定義した”global”を挿入します。

<nav class="siteNavi"><ul>
  <?php
    wp_nav_menu( array(
    'theme_location' => 'global', //どのナビを表示するか
    'container'      => 'div', //グローバルナビを囲むタグ
    'depth'          => 1, //0=>全階層表示、1=>親メニューだけ表示
    ) );
  ?>
</ul></nav>

WordPress管理画面「外観＞メニュー」でウィジェットメニューの設定をします。

左側から追加したいメニューを選択します。カテゴリーの場合はあらかじめ「投稿＞カテゴリー」でカテゴリーを作成しておきましょう。メニュー設定の「メニューの位置」はグローバルナビにチェックを入れます。
前述のプロフィールページの場合は「固定ページ」に入っています。

メニューを保存して、グローバルナビが表示されていたらOK。

次に、sidebar.phpのウィジェットを挿入する部分にウィジェットを表示する関数を挿入します。

functions.phpで設定したbefore(after)_widgetとbefore(after)_titleに入れたタグがウィジェットと記事タイトルの前後に表示されます。

<aside class="sidebar_widgetArea">
　　<ul>
　　　　<?php dynamic_sidebar( 'side-widget' ); ?>
　　</ul>
</aside>

WordPress管理画面でサイドバーのウィジェットの設定をします。
「外観＞ウィジェット」から、サイドバーに設置したいウィジェットを左側から選択し、タイトルと必要な項目を設定します。ここで入力したタイトルがサイドバーに表示されます。

変更を保存し、サイドバーにウィジェットが表示されていたらOK。試しにダミーの記事を投稿したりしてみてください。

ウィジェットだと最新の投稿にアイキャッチ画像をつけることができないので、もしつけたい場合はプラグインを利用するといいようです。

記事が増えてきたらプラグインを利用して人気の記事や関連記事なども表示したいですね。

アイキャッチ画像を挿入する

自作のテーマだとデフォルトではアイキャッチ画像を挿入することができないので、挿入ができるように設定していきます。

こちらもfunctions.phpに以下を記述します。
先ほどウィジェット用に記述した<?php 〜 ?>の中に、続けて記述します。

// アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(500, 350, true ); // リサイズする場合は入れる

管理画面のブログ投稿画面にアイキャッチ画像を挿入する項目が表示されればOK。

本サイトにアップロードして完成！

ローカル環境で確認ができたら、登録しているレンタルサーバーのFTPツールなどから作成したテーマを本番サイトにアップロードします。

ローカル環境の管理画面に設定していたウィジェットや固定ページと同じように本番の管理画面も設定し、表示されていれば完成です。

スポンサーリンク
タイトルとURLをコピーしました