読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

WordPressのテーマ作成ガイド | オリジナルのデザインでブログを作成

f:id:mochizuki_p:20170208204249p:plain

最初にWordPressとは?

  • PHPで作成されたブログ管理ツール(CMS)
  • 世界で最も普及している
  • カスタマイズ性が高く、ブログだけではなくWebメディアやWebアプリケーションの作成にも利用できる
  • 複数のテーマが公開されており、それらを柔軟に切り替えることができる

さらに詳しく

  • GPLライセンスで公開されているオープンソースソフトウェア
  • ユーザーは自作のライブラリを公開し、自由に使ってもらえることができる

なぜオリジナルのテーマを作成するのか?

  • コミュニティに貢献するため
  • 単純に面白いから
  • 良いテーマを作れば有料で販売することも可能

テーマ作成に最低限必要な要素

  • index.php
  • style.css

style.css

テーマの基本的な情報をここに載せておく

/* CSS Document */
/*
Theme Name: BB
Theme URI: http://wp.utali.net
Description: My favorite theme
Author: Mochizuki Ichiro
Author URI: http://www.utali.net
Template:
Version: 0.0.1
*/
説明
Theme Name テーマの名前
Theme URI テーマのデモを表示するWebサイト
Description テーマの解説
Author テーマの作者
Author テーマの作者のホームページ
Template オリジナルのテンプレートを改造してテーマを作成するときはここに親テンプレートを記載
Version テーマのバージョン

index.php

ホーム画面での記事一覧・または検索結果を表示するのに使用される

ここで問題!

サイトや記事のタイトルや記事のサムネイルなど、利用者が設定する値を出力するには?

WordPress組み込みの関数を使う

WordPressの管理画面の一般設定で入力した設定値を出力するにはWordPress組み込みのget_bloginfo()関数を利用します。

ブログのタイトルを出力

<?php echo get_bloginfo( 'name' ); ?>

f:id:mochizuki_p:20170208202219p:plain

ブログの概要を出力

<?php echo get_bloginfo( 'description' ); ?>

ブログのホームURLを出力

<?php echo get_bloginfo('url'); ?>
<?php home_url() ?>

これらの値は管理画面の 設定 > 一般 で設定した

  • サイトのタイトル
  • キャッチフレーズ
  • WordPressアドレス(URL)

にそれぞれ対応しているので注意

f:id:mochizuki_p:20170208202235p:plain

実際にホーム画面を出力してみる

<?php get_bloginfo('name'); ?>
<?php get_bloginfo('description'); ?>

f:id:mochizuki_p:20170208202209p:plain

しっかりとサイトのタイトルとサイトの説明が表示されていることがわかります

記事一覧を表示する

WordPressでは記事一覧を表示するための専用の関数が存在します。

記事が存在するときに有効になるブロック

<?php if ( have_posts() ): ?>

<?php endif; ?>

記事一覧を作成するブロック

<?php while ( have_posts() ): the_post(); ?>


<?php endwhile; ?>

このブロックの中では以下の関数が使えます.

記事へのリンクを出力

<?php the_permalink(); ?>

記事のタイトルを表示

<?php the_title(); ?>

記事の抜粋を表示

<?php the_excerpt(); ?>

実際に記事一覧の部分を作ってみる

<?php if ( have_posts() ): ?>

<?php while ( have_posts() ): the_post(); ?>

<!-- ここから下の部分が繰り返される -->
<article>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <div>
        <?php the_excerpt(); ?>
    </div>
</article>

<!-- 繰り返し終わり -->

<?php end while; ?>

<?php endif; ?>

このように記事の一覧が作成されました。

f:id:mochizuki_p:20170208202259p:plain

WordPress共通のヘッダ部分を挿入する

これを含めないとエラーが発生することがあるのでタグ内にwp_head()関数を挿入します

<?php wp_head(); ?>

この時点でのindex.phpの中身は以下の通りです

<?php
/**
 *    The template for dispalying the index.
 *
 * @package    WordPress
 * @subpackage BB

 */
?>
<html>
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class() ?>>
<div class="container">
  <div class="row">
    <h1><?php echo get_bloginfo( 'name' ); ?></h1>
    <div><?php echo get_bloginfo( 'description' ); ?></div>
    <a><?php home_url() ?></a>
  </div>
</div>
<section>
  <?php if ( have_posts() ): ?>
  <?php while ( have_posts() ): the_post(); ?>
  <article>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <div>
      <?php the_excerpt(); ?>
    </div>
  </article>
  <?php endwhile; ?>
<?php endif; ?>
</section>
</body>
</html>

個別の記事を作成する

トップページを表示しただけではブログとは言えません。ブログを作成するには、個別の投稿ページを作成する必要があります。もちろん、投稿ごとにそれぞれ異なるファイルを用意するではなく、同じテンプレートに別の内容を入れて使い回すことになります。

記事テンプレートのsingle.phpを作成

WordPressで個別の投稿に対応するのはsingle.phpです

ここで新しく登場する関数は

記事の投稿時間を表示

<?php the_time( 'Y-m-d' ); ?>

記事の本文を表示

<?php the_content(); ?>

これを利用するときに1つ注意したいことがあります。この関数はWhileループの中でしか利用できないのです。

<?php if ( have_posts() ): ?>

<?php while ( have_posts() ): the_post(); ?>

/* ここにthe_content(); を配置する */
<?php the_content(); ?>
<?php end while; ?>

<?php endif; ?>

もしWhileループの外にこの関数を配置しても何も出力されません。注意しましょう。

前のページへのリンク

<?php previous_post_link('%link','<'); ?>

次のページへのリンク

<?php next_post_link('%link','>')?>

single.php

<?php
/**
 *    The template for dispalying the index.
 *
 * @package    WordPress
 * @subpackage BB

 */
?>
<html>
  <head>
    <?php wp_head(); ?>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <h1><?php the_title(); ?></h1> 
        <span><?php the_category(' ') ?></span>
        <span><?php the_time( 'Y-m-d' ); ?></span>
        <?php if(have_posts()): ?>
          <?php while(have_posts()): the_post(); ?>
              <div><?php the_content(); ?></div>
          <?php endwhile; ?>
        <?php endif; ?>
      </div>
      <div>
       <span><?php previous_post_link('%link','<'); ?></span>
       <span><?php next_post_link('%link','>')?></span>
      </div>
    </div>
  </body>
</html>

これを作成したら、次のように表示されます。

f:id:mochizuki_p:20170208202722p:plain

実際に使ってみる

自分で作成したWordPressテーマをプライベートな用途で利用するのは簡単です。

その前にこの時点でテーマを入れてあるフォルダの中身を確認しましょう

f:id:mochizuki_p:20170208203417p:plain

テーマの中身(最低限)

  • index.php
  • single.php
  • style.css
  • screenshot.png

1.テーマを作成したフォルダをZip圧縮する

f:id:mochizuki_p:20170208202733p:plain

Mac(OS X)ならば、フォルダを左クリックして、"{フォルダ名}“を圧縮するを選択します。

すると圧縮されたファイルが作成されます。

f:id:mochizuki_p:20170208202745p:plain

2.管理画面からテーマを選択してインポート

画面左上側にある「新規追加」を選択

f:id:mochizuki_p:20170208202801p:plain

そして、やはり画面左上にある「テーマを追加」の右横にある「テーマのアップロード」を選択

f:id:mochizuki_p:20170208202834p:plain

すると画面中央にアップローダが表示されるので、「ファイルを選択から」先ほど作成したZipファイルをインポートする

f:id:mochizuki_p:20170208202847p:plain

これを選択

f:id:mochizuki_p:20170208202902p:plain

ファイル名が反映されたら「今すぐインストールを選択」

成功したら「テーマのインストールが完了しました」と表示される

f:id:mochizuki_p:20170208202917p:plain

「有効化」をクリックするとテーマが反映されます。

「新しいテーマを有効化しました」と表示されたら成功です。

f:id:mochizuki_p:20170208202928p:plain

つぎの記事はこちら

www.utali.io