水瓶座列車

どこまで行けるか、とりあえず発車します。

WordPressのデフォルトテーマをベースにした自作テーマの作成手順

f:id:aquarius999:20201102041847p:plain

 

WordPressには、インストールした時点でデフォルトのテーマがいくつかありますが、

これらを使用しない場合は、自分に合ったテーマを検索してインストールしていると思います。

しかし、それでもなかなか自分の希望するテーマに出会うことはあまりなく、

ある程度妥協して使用しなければなりません。

自分に合うテーマが無ければ、自分で作った方が早いということで、

Twenty Seventeenのテーマをベースにして、私がオリジナルのテーマを作った方法を解説していきます。

少しのHTML/CSSPHPの知識で十分にできます。

 

 

 

 

  1.Twenty Seventeenを使用した理由

 

このテーマを使用した理由は、私がWordPressを始めた時に一番最初に使用したテーマで、

使い慣れているということとヘッダ、本文、サイドバーが基本のとてもシンプルなレイアウトなので、

カスタマイズが容易だからです。

ただ、これから説明していく内容は、twentyseventeenテーマに特化した内容ではなく、

WordPressCSSPHPファイルの把握なので、どのテーマでも利用できると思います。

 

 

  2.子テーマの作成

 

テーマをオリジナルにする時、直接Twenty Seventeenフォルダ内のファイルを修正するのではなく、

子テーマを作成してからの方が良いです。

子テーマの作成はすごく簡単で、詳細については、下記を参照してください。

WordPressの子テーマの作り方を解説 - 水瓶座列車

 

 子テーマのメリットは、自分でカスタマイズした内容が、

WordPressのアップデートによって上書きされないことにあります。

ここでは子テーマを作成していることを前提に説明していきます。

子テーマのフォルダ名は、上記記事で使用しているtwentyseventeen-childとします。

 

 

  3.記事投稿ページのテンプレート作成

 

記事投稿ページは、WordPressの管理画面の「投稿」から記事作成するページです。

子テーマを作成していない状態でのデフォルトの投稿記事ページのテンプレートファイルは、

twentyseventeen/template-parts/post/content.phpを使用しています。

これは、twentyseventeen/single.phpの24行目あたりにある、下記のコードで読み込まれています。

get_template_part( 'template-parts/post/content', get_post_format() ); 

 

 

まずは、このファイルを子テーマに配置するのですが、その時にtemplate-partsフォルダも作成し、

twentyseventeen-child/template-parts/post/content.phpとして子テーマに配置します。

このファイルは、全ての投稿記事ページのフォーマット(テンプレート)になりますので、

例えば、記事タイトルの上にパンくずリストを追加したければ、このファイルに追加します。 

そして、記事内容はいつもの感じでWordPressのエディタで書いていきます。

まとめると、投稿記事のテンプレートをカスタマイズするには、

・twentyseventeen-child/single.php

・twentyseventeen-child/template-parts/post/content.php

を編集することでできます。 

 

  4.固定ページのテンプレート作成

 

固定ページは、WordPressの管理画面の「固定ページ」から作成するページです。

このテンプレートファイルは、twentyseventeen/template-parts/page/content-page.phpが使用されます。

これは、twentyseventeen/page.phpファイルの30行目あたりにある下記コードで読み込まれています。 

get_template_part( 'template-parts/page/content', 'page' );

 

固定ページをカスタマイズしたい場合は、3項と同様に子テーマにコピーして、

・twentyseventeen-child/page.php

・twentyseventeen-child/template-parts/page/content-page.php

を編集することでできます。

 

またデフォルトでは、2列のレイアウトで左側がタイトル、右側が本文になっています。

これを1列にしたい場合は、「外観」‐>「カスタマイズ」‐>「テーマオプション」から選択できます。 

もし、テーマオプションが無い場合は、右側のプレビュー画面に固定ページを表示すると出現します。

 

  5.トップページを固定にしてカスタマイズ

 

サイトを表示した際のトップページは、最新記事か固定ページにするかの設定がWordPressにあります。

しかし、固定ページをトップにすると使いにくい感じがしますし、

最新記事だと記事一覧を表示するようなページを固定することができません。

そこで、home.phpファイルを作成します。

home.phpがあると先ほど言ったトップページの設定に関わらず、必ずこのファイルが読み込まれます。

(詳細は、WordPressのサイトに記載があります。)

 

home.phpの作成方法は、いろいろあると思いますが、

ここでは、single.phpをコピーしてhome.phpにリネームして使用します。 

f:id:aquarius999:20191017221505p:plain

 

そして上図の赤枠のPHPコード部分を削除して、

その部分にdivタグ、pタグ、tableタグなど自分の好きなように記述していきます。

この場所で、WordPressAPIPHPを使用すれば、WordPressの記事一覧を表示することもできます。

自分のイメージしたものを作れるので、トップページにhome.phpを使用すると便利です。

 

  6.ヘッダーのカスタマイズ

 

ヘッダーのカスタマイズも今までと同様に、親テーマにあるheader.phpを子テーマにコピーします。

そして、子テーマのheader.phpに直接編集していきます。

例えば、headerタグ内にはGoogleアナリティクスのトラッキングコードを入れたり、

JQueryを使用するためのscriptタグやコードを入れたりします。 

 

 

  7.最後に

 

WordPressを初めて使った時は、自分に合うデフォルトのテーマをそのまま使用していましたが、

使い慣れてくると徐々にWordPressの構造やAPIがわかるようになってきました。

Twenty Seventeenではサイドバーが右側にありますが、それを左側に移動させることも,

Twenty SeventeenCSSを解読すれば、子テーマのCSSで変更するということもできます。

WordPressは、他のブログサービスより自由度がある分、慣れや勉強が必要ですが、

慣れてしまえば、更にオリジナリティを出すことができます。 

 

<関連・おすすめ記事> 

WordPressループの書き方の解説 - 水瓶座列車

WordPressのモバイルでのページネーションの表示方法 - 水瓶座列車

WordPressのトップページに記事一覧を表示する方法 - 水瓶座列車

サーバー上のWordPressデータをローカル環境にインポートする手順 - 水瓶座列車

WordPressでモバイル対応のためのCSS作成方法の解説 - 水瓶座列車