WordPressのテーマを作ってみよう!

Contents

今回利用する環境について

今回は新しいWordPressを使ってテーマファイルを作っていきます。WordPressがインストールされたレンタルサーバなどは持っていますか?

みなさんWordPressを持っていますか?

WordPressがインストールされたレンタルサーバは持っていますか?

WordBench富山では勉強会用のWordPressがあります

WordBench富山では勉強会で使ってもらう用のWordPressがあります。必要な方は言ってくださいね。
WordPressの作成にあたってはみなさんのアカウント名となる名前やハンドルネームを教えてください。それで作成します。

インストールしてみましょう

準備が整ったらインストールに進みましょう。アップロードが済んだらインストールへと進みます。

とはいっても簡単です

管理画面にログインしてみましょう

Screen Shot 2015-02-27 at 9.41.50 PM

Screen Shot 2015-02-27 at 9.42.16 PM

Screen Shot 2015-02-27 at 9.42.33 PM

既存のテンプレートを編集してみましょう

さてでは早速、習うより慣れろ、既存のテンプレートを編集してどのように変化するか見て見ましょう。

twenty~シリーズの編集

WordPressには「Twenty〜」で始まるテーマが標準でついてきます。例えばTwentyEleven, TwentyFifteenといったものがあります。今回はTwentyFifteenを編集してみましょう。
まずは現在のテーマがTwentyFifteenになっているか確認しましょう。
管理画面のメニューから外観、テーマを選択し(外観>テーマ)、「有効」となっているテーマがTwentyFifteenになっているか確認しましょう。
TwentyFifteenが有効になっていない場合にはTwentyFifteenを「有効化」しましょう。
さぁ、テーマを編集する準備が整いました。早速編集してみましょう。

single.phpを編集してみましょう

WordPressのテンプレートであるシングル(single.php)を編集しましょう。
管理画面のメニューから外観、テーマの編集を選択しましょう(外観>テーマ)。
右上にある「編集するテーマを選択」がTwentyFifteenになっているか確認しましょう。
右側にはファイルの一覧があります。ここからシングルを選びましょう。
シングルはページ下部に「単一記事の投稿」(single.php)と書かれています。これをクリックして開きましょう。

文字を追加してみましょう

真ん中のエディタ部分にシングルが開いたらそこに文字を追加しましょう。

<main id="main" class="site-main" role="main">

<?php
<!--?php <br ?--> // Start the loop.

のあいだにこんにちは、を入れてみましょう。

<main id="main" class="site-main" role="main">
こんにちは
<?php
<!--?php <br ?--> // Start the loop.

となります。

Screen Shot 2015-02-28 at 12.44.38 AM
入力したら真ん中下にある「ファイルを更新」をクリックしましょう。

投稿を表示しましょう

シングルを編集したので投稿を見てみましょう。
管理画面のメニューから投稿をクリックします。投稿の一覧が現れたら「Hello World」にカーソルを合わせ、「表示」をクリックします。
「Hello World」をクリックしてしまった場合には中央上部にある「投稿を表示」ボタンで投稿の確認ができます。
どうですか?ページに「こんにちは」と表示されていますか?
表示されていれば成功です。やりましたね!
確認が終わったらブラウザの戻るボタンで管理画面に戻りましょう。

やっぱりこんばんは!

先ほどはこんにちは、と書いたのですが、同じ要領で「こんばんは」に変更しましょう。テンプレートファイルを選択して、「こんにちは」と書いてある箇所を変更しましょう。
変更が終わったら保存して、投稿を表示して確認しましょう。
どうですか?できましたか?
思ったより簡単ですね!

page.phpを編集してみましょう

次に固定ページ(page.php)のテンプレートを変更してみましょう。

固定ページを表示しましょう

先ほどはいきなりテンプレートを編集しましたが、今回は先に確認しましょう。
管理画面のメニューから「固定ページ」を選択します。「サンプルページ」にカーソルを合わせて「表示」を右クリックしましょう。
なにやらメニューが出てきましたね。今回は「新規タブで開く」を選択しましょう。
テンプレートファイルを編集する際には表示を確認しながら編集すると、どこがどのように変化するかわかって便利です。このように表示のタブと編集のタブを両方利用しましょう。
では元々開いていたタブは編集を行いましょう。

page.phpを編集しましょう

固定ページのテンプレート編集もシングルの場合と一緒です。
管理画面のメニューから外観、テーマ編集を選択します(外観>テーマ編集)。
右上にある「編集するテーマを選択」がTwentyFifteenになっていることを確認して編集するテンプレートを選択しましょう。
今回は固定ページのテンプレートの編集でした。固定ページのテンプレートはpage.phpという名前です。こちらも右側のリストの下の方にあります。
実はWordPressではこのテンプレートはアルファベット順に並んでいます。
single.phpやpage.phpはs、pで始まっています。他のテンプレートファイルに比べるとsやpは遅いので下部に表示されています。
テンプレートファイルについてはアルファベット表記と対応させて覚えておくと便利ですよ。

編集

編集についてはシングルと同様です。
今回は

hoge

<!--?php <br ?-->

の間に「<div class="“color:">こんにちは</div>
と書いてみましょう。

<div class="“color:">こんにちは</div>
<!--?php <br ?-->

となりますね。
編集が終わったら保存ですね。保存の方法もさっきやりましたね。「ファイルを保存」で保存できます。

確認しましょう

さて編集が終わりましたので確認してみましょう。
先ほどは「管理画面から投稿を選んで…」と確認しました、が、今回は固定ページをタブで開いていましたね。
そちらから確認しましょう。
「サンプルページ」のタブを開いてページを再読み込みさせませしょう。
再読み込みはブラウザの更新ボタンでもできますし、ショートカットで「Ctrl+r」(Windowsの場合)、「Cmd+R」(Macの場合)でもできます。(ブラウザによって変わることもあります)
テーマ編集をする場合には覚えておくと便利ですね。

indexを編集してみましょう

次はindexを編集しましょう。

トップページを表示しましょう

まずサイトのトップページを開きましょう。
トップページは管理画面の左上にあるロゴマークの近くにカーソルを合わせ、「サイトを確認」から開くことができます。
今回も先ほどと同じように右クリックをして新規タブで開いてみましょう。
準備が整ったら実際に編集しましょう。

index.phpの編集

管理画面からindex.phpを開きます。
index.phpはメインインデックスのテンプレート、という名前です。
トップページではありませんね。
実はindex.phpは特殊なファイルなのです。このファイルがないとテーマは動きません。

スタイルシートを書き換えましょう

h1タグを赤色にしましょう

h1 { color: red; }

テンプレートは色々あります

今回はsingle.php, page.php, index.phpを編集しました。WordPressのサイトには一つのテーマで構成されていて、そのテーマの中には複数のテンプレートファイルがあります。
今回はtwentyfifteenというテーマのsingle.php, page.php, index.phpを編集しました。
WordPressでサイトを作っていく、ということはこれらのテンプレートファイルを作る、ということです。

続いて実際にテーマを作っていきましょう

さてウォームアップはこのぐらいにして実際に自分のテーマを作ってみましょう。
ここからは新規にテーマを作ることになりますので、FTPが必要になります。今回の環境がiPadなどでFTPが無い場合にはご相談ください。適宜対応します。
手元のパソコンに作業用のフォルダを作っておいてください。
デスクトップに「my_great_theme」というフォルダを作ってください。今回はここで作業をしていきます。

サンプルファイルについて

空っぽのテンプレートファイルのサンプルを用意しました。
コチラからダウンロードしてください。

style.cssを作りましょう

まずはstyle.cssというファイルを作りましょう。
「my_great_theme」のフォルダを開き、右クリックから「新規テキストファイル」を選択します。
その後ファイル名を変更し、メモ帳で編集します。
拡張子の変更方法が分からない場合にはコチラを参考してください。

style.cssには書き方のお作法があります

では早速、style.cssを編集しましょう。
WordPressのstyle.cssには書き方に一定のルールがあります。それに従って記述していくことになります。
今回は

/*
Theme Name: My Great Theme
*/

と記述しましょう。
今回はこれだけです。
編集し終えたら保存しましょう

index.phpを作りましょう

次にindex.phpを作成しましょう。style.cssを作成したときと同じ手順で「my_great_theme」のフォルダを開き、右クリックから「新規テキストファイル」を選択しファイルを作成します。ファイル名を変更して、メモ帳で編集します。
index.phpの中身は次のように記載しましょう

Hello WordPress!!

編集し終えたら保存しましょう

テーマを圧縮しましょう

今回作ったstyle.cssとindex.phpが入ったフォルダを圧縮しましょう。
Windowsであればフォルダを右クリックして「送る > 圧縮(zip)」を選んでください。

テーマをアップロードしましょう

続いて圧縮したフォルダをアップロードしましょう。
管理画面の「外観」をクリックし、画面上部にある「新規追加」をクリックし、続いて「テーマのアップロード」をクリックします。
先ほど圧縮したzipファイルを選択し「今すぐインストール」をクリックします。

テーマを有効化しましょう

インストールが完了したらテーマを「有効化」しましょう。
アップロード直後に出てくる画面にある「有効化」以外にも、「外観」から選択、有効化することもできます。

テーマを確認してみましょう

アップロードしたテーマを有効化したら、サイトを表示して確認しましょう。

真っ白な画面でしたか?style.cssとindex.phpを作りましたが、まだほとんどテーマが無い状態ですので真っ白です。

テーマファイルの編集について

テーマファイルを一度アップロードしてしまえば、前の章と同じ方法である管理画面から編集することができます。
今回おこなったパソコンで編集してzipでアップロードという方法と管理画面からの編集、どちらでやってもかまいません。

追加のファイルアップロード

本記事では簡単のため管理画面で編集します。
管理画面で編集するため、先ほどのstyle.css, index.php以外にもファイルを事前にアップロードしておきましょう。
header.php, single.php, footer.phpを作成しましょう。
my_great_themeフォルダを圧縮してアップロード、インストールしましょう。

パーツファイルについて

テーマを構成するテンプレートのうち、パーツファイルと呼ばれるテンプレートファイルがあります。これらのファイルを作っていきましょう。

header.phpを作って編集しましょう。

ヘッダーテンプレートファイルを作りましょう。ファイル名はheader.phpです。
中には下記のように編集しましょう。

<!DOCTYPE html>
<head>
<?php wp_head(); ?>
</head>
<body>

編集が終わったら保存しましょう。

footer.phpを作って編集しましょう

フッターテンプレートファイルを作りましょう。ファイル名はfooter.phpです。
中には下記のように編集しましょう。

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

編集が終わったら保存しましょう。

index.phpを編集しましょう

次にindex.phpを編集しましょう。
中には下記のように編集しましょう。

<?php get_header(); ?>
<?php while(have_posts()): the_post(); ?>
タイトル: <?php the_title(); ?>
本文: <?php the_content(); ?>
<?php endwhile; ?>
<?php get_footer(); ?>

表示を確認しましょう

テーマファイルがアップロードできたら確認してみましょう。
index.phpはトップページの
ちゃんと表示されましたか?

うまく行かない場合にはタイプミスなどをしていないか確認しましょう。
また講師やうまく行っている人に助けを求めましょう。

WordPressやプログラミングではエラーを見つけることは大変です。
助けてくれる人が居る場合には助けてもらいましょう。そしていつの日かあなたが助ける側に廻りましょう。

single.phpを編集しましょう

single.phpを編集しましょう。

<div>タイトル: <?php the_title(); ?></div>
<div>日付: <?php the_time('Y-m-d'); ?></div>
<div>本文: <?php the_content(); ?></div>

編集が完了したら確認しましょう。
確認の方法は…、そう、おわかりですよね。

テンプレートタグ

この章ではテンプレートファイルを編集しました。その際に <?php ?> で囲まれた箇所がありました。
HTMLでは<>で囲まれたものをタグとよびます。
WordPressでは<?php ?>で囲まれたもの、またその中身をテンプレートタグと呼びます。
テンプレートタグを組み合わせることで柔軟で多彩なウェブサイトへと仕上げていくのです。
夢が広がりますね。

テーマ作成で便利な機能

テーマ作成を行う上で便利な機能を紹介します。

ソースコードの見方について

HTMLを見るためにはブラウザで右クリックして「ソースを表示」をクリックします。
ブラウザで表示されいる文字などはすべてこのソースによって作られています。

要素を検証について

ブラウザ上で右クリックして「要素を検証」をクリックするとHTMLの検証が行えます。
テーマ開発を行う上では便利にして必須の機能です。是非とも活用しましょう。

プライベートウィンドウについて

ブラウザにはプライベートウィンドウ、プライベートモード、シークレットモードと呼ばれるものがあります。
プライバシーに配慮した状態でブラウジングすることができるのですが、ウェブ開発にも応用できます。
プライベートウィンドウではログイン状態がクリアできるので、別のユーザーでログインしたり、ログイン状態を無したりして表示を確認することができます。

じっさいにプライベートウィンドウを開いて管理画面にジャンプしようとしてみると分かりますね。

ダミー記事の投稿について

テーマ作成を行う際にはダミーデータを利用すると便利です。
https://github.com/jawordpressorg/theme-test-data-ja
実際にダミーデータをいれて試してみましょう。

[http://placehold.jp/1000×350.png]画像ファイルの場合には、いろいろなサイズのダミー画像を作って作ってくれるサービスもあります。

ダミー記事の投稿

先ほど紹介したダミー記事を導入しましょう。
https://github.com/jawordpressorg/theme-test-data-ja
こちらのURLから右側にある「Download」をクリックしてデータをダウンロードします。
管理画面から「ツール>インポート」を選択します。
アップロードして適用させましょう。

完了したらサイトを確認しましょう。

PHPを書いてみましょう

WordPressはPHPというプログラミング言語で作られています。PHPを使うことで楽しいウェブサイトを作ることができます。
PHPを書いてみましょう。

ログインしているかどうか確認する

single.phpにログインしているかどうかの判断を書いてみましょう。
single.phpの先頭に以下のコードを追加してください。

<?php if (is_user_logged_in()): ?>
あなたは登録ユーザー様ですね!<br />
<a href="<?php bloginfo('siteurl');?>/wp-admin/">管理画面</a>に行きますか?
<?php else: ?>
なんと!あなたはまだ登録していないのですね!<br />
<?php endif; ?>

すこし長いですががんばって書きましょう。
書き終わったら保存して確認しましょう。single.phpに書きましたので確認は投稿の確認画面ですね。

うまく書けましたか?

PHPの編集では少しのミスで画面が真っ白になります。みんな通る道ですので挫けずがんばりましょう。

前後のページへのリンクを作成する

カテゴリを追加する

archive.phpを編集する

ページングを作成する

パンくずリストを追加する

single.phpとarchive.phpでパンくずリストを作成しましょう。
パンくずリストはトップページなどから辿ることができる、現在ドコにいるかを知るためのものです。

カテゴリのアーカイブページでは「トップ < カテゴリ名」、シングルでは「トップ < 記事名」のパンくずリストを作成しましょう。