2020/05/16 0:30

[Wordpress自作テーマ①]初心者向け！ワードプレスの自作テーマ作成方法

「Wordpressは使った事あるけど、自作のテーマを作った事がない」という方向けのチャレンジ記事です。

取り合えずスターターキット的なテンプレファイル一式用意したのでぜひ「1からのWP自作テーマ」にチャレンジしてみてください。

テンプレのダウンロード

まずはこちらのファイル一式をお使いください。

テンプレファイル一式 : ダウンロード

【注意1】

このテンプレはSass（scss）を使ってます。

Compassを使ってrbにてコンパイルを行ってますので、そこの理解がないといきなり詰むかもです。

[Windows版]Sublime Text＋CompassでSassをコンパイルする為の設定方法

https://phper.pro/359

どうしてもSassが無理だ！っていう人は「sass」フォルダを消して「css」の方だけでも一応は頑張れます。

【注意2】

Sassを使う事を前提のファイルとなってますが、あくまでただのテンプレファイルなのでそのままテーマとして使えるという訳ではありません。

中身の記述（マークアップ）やスタイル（Sass・CSS）に関しては“ご自身で作っていく為のもの”となってます。

では中身のファイルの説明をしていきます。

ファイルの使い方一覧

最初に言っておくと、あくまでも中身を作るのは各々のコーディングが全てとなりますので、このファイル一式は最低限必要なページ構成のみだと思ってください。

では取り合えずざっくり説明します。

・libフォルダ内の説明

-css

SCSSがコンパイルされてCSSファイルがここに吐き出されます。

ヘッダーで読み込むのはここのCSSファイルのみって感じになります。

-images

画像ファイル等はここに突っ込んで使ったらいいと思います。

-php

functions.phpファイルに記述するような内容は切り分けてここに作ってくような形を想定してます。

既に「cleanup.php」というファイルを入れてますが、内容は自由に変更してください。

-sass

sass（scss）ファイルはここのフォルダ内に作って行く感じです。

一応デフォで「_reset.scss」が入ってます。

他の「_project.scss」や「_custom.scss」等は自由に記述してください。

ちなみに「style.scss」ファイルはガッチャンコしてCSSへとコンパイルする用のファイルです。

・各ファイルの説明

-404.php

その名の通り「404エラー」時に表示されるページです。

-archive.php

アーカイブ別記事一覧のページです。

例えば「2020年4月の記事一覧」みたいな時のやつです。

-category.php

カテゴリー別記事一覧のページです。

例えば「“プログラム”の記事一覧」みたいな時のやつです。

-config.rb

Compassを使ってscssをcssにコンパイルするRUBYファイルです。

-footer.php

フッター用のファイルです。

-functions.php

ファンクションファイルです。

主にテーマ内で使う関数の定義や管理画面の設定ができます。

-header.php

ヘッダー用のファイルです。

-index.php

TOPページ用のファイルです。

-page.php

固定ページ用のファイルです。

-screenshot.jpg

管理画面＞外観＞テーマ、で表示されるスクショです。

どうぞ好きなものに変えてください。

-single.php

投稿記事個別ページです。

-style.css

ここのcssファイルにはテーマ自体の情報なんかを書いてます。

どうぞ好きに変更してください。

具体的なコーディング方法

まずはイメージ的にはこんな感じになりますよね。

①header.php

ヘッダーになる箇所のファイルです。

ナビゲーションとか、全ページに表示させるメニューナビとかを書いておくといいかと思います。

テンプレファイルには既にOGP設定用のテンプレが記述してありますが、ぜひ活用してください。

②footer.php

同様にフッター箇所ですね。

コピーライトとか書いておくと良いかと思います。

③index.php

ここはTOPページのメイン部分となります。

URL飛んで最初に開くページの事ですね。

で、上部にはヘッダーが読み込まれ、同様に下部にはフッターが読み込まれて表示されている状態です。

<main>タグで囲ってTOPページ内の内容を記述します。

もしサイドバーをつけるなら<aside>とかで囲ったりすればOKです。

さらにその中でサイドバー用ファイルを読み込ませてやると良いと思います。

その場合は別で「sidebar.php」ファイルを作ると良いかと思います。

例）index.php


<?php get_header(); ?>
 
  <main>
   メインコンテンツを記述
  </main>
 
  <aside>
   <?php get_sidebar(); //sidebar.phpファイルを読込 ?>
  </aside>
 
<?php get_footer(); ?>

④page.php

同じように「固定ページ」用のテンプレートを作成していく訳ですが、例えば「page-about.php」という名前のファイルにして、内容はファイル内に直書きしていくという方法で全然OKです。

その時にWP管理画面の「固定ページ」で同じパーマリンク名のものを作っておいてください。

例）page-about.php


<?php get_header(); ?>
 
  <main>
   ABOUTの内容を記述
  </main>
 
  <aside>
   <?php get_sidebar(); //sidebar.phpファイルを読込 ?>
  </aside>
 
<?php get_footer(); ?>

⑤single.php

投稿した記事の個別ページです。

イメージとしては記事一覧から個別シングルページへ飛んだ先のページの事ですね。

つまり記事内のタイトルやコンテンツ等を表示させるページとなります。

例）single.php


<?php get_header(); ?>
  <main>
<p><?php the_time('Y-m-d'); ?></p>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
<div>
<?php previous_post_link('%link','古い記事へ'); ?>
<?php next_post_link('%link','新しい記事へ'); ?>
</div>
  </main>
 
  <aside>
   <?php get_sidebar();?>
  </aside>
<?php get_footer(); ?>