wordpressの自作テーマを作る(第3回:オリジナルテーマ設定)

スポンサーリンク


wordpress(ワードプレス)で自作テーマを作る方法を紹介していく長期連載の第3回は、自作テーマの設定方法について紹介します。この辺りから「わからない」と嘆く方もいるでしょうから、初心者の方はよく読んで実践しましょう。

「外観」から「テーマ」を選んでサイトの見栄えを決定する

ワードプレスのダッシュボードを開くと、左側に「外観」の選択肢があります。ここから「テーマ」を選択します。すると、テーマの選択画面が出てきます。初期画面のテーマは「twenty Sixteen」などのwordpressにおけるスタンダードテーマがあらかじめ入っています。ボタン一つで着せ替え人形のようにサイトの外観が変化するというわけです。

初期状態のテーマ

初期状態のテーマ

themesフォルダ直下のindex.phpは触れてはいけない

連載の第2回でも説明しましたが、外観を決める要素(テーマ)と記事(データベース)はそれぞれ個別に保管されています。では、テーマはどこに格納されているかといえば、ワードプレスのフォルダを開いた中にある「wp-content」をさらに開き、「themes」の中に用意されているテーマのフォルダがあります。

「themes」の中には「index.php」というファイルがあります。これは、何を示しているのでしょうか。中を開いてみると、以下のコードが書かれていました。


<!--?php 
// Silence is golden.

</pre>
<p>Silence is golden(沈黙は金なり)、つまり触れないほうが良いという意味です。おそらく、ワードプレスの本体とテーマをリンクさせるための設定を司るファイルなのではないかと思いますが、詳しくはわかりません。これは消してはいけません。</p>
<h2>themesフォルダ内に「mytheme」フォルダを作る</h2>
<p>このテーマが格納されているthemesフォルダ内に、オリジナルテーマを入れていきます。</p>
<p>まず、フォルダを新規作成しましょう。名前は何でも結構ですが無難に「mytheme」で良いのではないでしょうか。</p>
<div class=”mceTemp”><dl id=”attachment_1701″ class=”wp-caption aligncenter” style=”width: 410px”><dt class=”wp-caption-dt”><img class=”wp-image-1701″ src=”https://banabo.net/wordpress/wp-content/uploads/2016/08/wp2-2-1024×503.png” alt=”themesフォルダ” width=”400″ height=”197″ ?–>themesフォルダに「mytheme」フォルダを作成

mythemeフォルダ内に3つの素材を用意する

続いて、mythemeフォルダ内に3つの素材を用意しましょう。

  1. index.php
  2. style.css
  3. screenshot.png

 

3つのファイルを作成

3つのファイルを作成

とりあえず、index.phpは今のところ空のままにしておきましょう。

スポンサーリンク

続いて、style.cssには以下のコードを記述します。


@charset "UTF-8";
/* 
Theme Name: MY THEME
Author:作者やサイト名など自由に記述
Description: This is my original theme.
Version:1.0
*/

screenshot.pngはサイトのロゴやトップページを予定している画像が望ましいのではないでしょうか。

index.phpはテンプレート、style.cssはテーマ情報、screenshot.pngはテーマのアイコン画像

では、themesフォルダ内の3つは何を意味しているのでしょうか。

新規作成したindex.phpはページの表示に使われる基本的な「テンプレート」にあたります。

style.cssはテーマとして認められるための情報を記述しました。Theme Nameはテーマ名、Authorは作者名など自由に記述してください。Descriptionはテーマに関する説明、Versionは最初のバージョンとして「1.0」と記述しておきましょう。他にもTheme URL(テーマのアドレス)やAuthor URL(作成者のアドレス)、Tag(タグ)、License(ライセンス)、License(ライセンスのアドレス)も記述することができますが、上記に書いたコードは最低限必要な情報だけです。

これらのファイルをthemesフォルダに入れたら、ダッシュボードに戻って「外観」から「テーマ」を再び選択してみましょう。すると、最初に入っていたテーマの中に新しいテーマが入っているはずです。このテーマを「有効化」してみると、テーマを使ってサイトが表示されたことになります。

テーマ選択画面

テーマ選択画面

テーマを有効化する

テーマを有効化する

ただ、この状態で表示されたサイトは真っ白なはず。なぜかといえば、テンプレートファイル(index.php)には何も記述されていないからです。次回は、このindex.phpにコードを記述して投稿した記事を表示させる過程を紹介します。

 

スポンサーリンク


初期状態のテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。