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

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(); ?>

 

 

⑥archive.php / category.php

 

アーカイブやカテゴリー一覧のページはindex.php等に書くような記事一覧をコピペして流用するのが簡単かなと思います。

ただ若干書き方は変わると思いますのでご注意ください。

 

 

⑦sassフォルダについて

 

sassフォルダの使い方は基本的に自由に使ってもらえたらいいんですが、「project」の中は実際に使うスタイルの記述をファイル毎に作って行ってもらえたらOKです。

「vendor」フォルダにはリセットやイニシャライズするような初期化用のファイルなんかを入れておくと分かりやすいかなと思います。

 

 

⑧404.php

 

404 NOT FOUND時のページです。ちゃんと書いておきましょう。

TOPへ戻る為のリンクなんかがあると親切かと思います。

 

 

まとめ

 

基本的には以上となります。

これだけで充分にオリジナルテーマでのサイト作成は可能です。

 

後はカスタムするとしたら

 

・ページネーション(ページャー)をつける

・パンくずリストをつける

・フリーワード検索をつける

・カスタムフィールドで便利に使う

・メールフォームをつける

 

その他、便利なプラグインを有効活用するのもアリですね。

ぜひオリジナルのテーマを完成させましょう。

 

 

では現場から以上です!

 

 

サーバーについて

 

WordPressが使えるサーバーのオススメなんかもついでに書いておきます。

 

エックスサーバー

 

高速・高機能・高安定の大手レンタルサーバー

 

LOLIPOP

 

こちらも老舗の大手レンタルサーバー

 

さくらサーバー

 

高速・安定・無料SSL付きの老舗サーバー

 

お名前.comレンタルサーバー

 

ドメインが永久無料で取得できる高速レンタルサーバー

 

カゴヤ・ジャパン

 

共用サーバー、VPS、マネージド専用サーバーなど、豊富なプランのレンタルサーバー

 

JETBOY

 

月額290円から使える次世代クラウド型SSDレンタルサーバー

 

mixhost

 

月額880円からの高性能クラウドレンタルサーバー

 

XREA(エクスリア)

 

無料プランもある高品質レンタルサーバー

 

リトルサーバー

 

月額150円でWordpressが使えるありがたいサーバー

 

ConoHa WING

 

最近注目されている初期費用無料の高性能レンタルサーバー

 

wpX Speed

 

WordPress専用の超高速クラウド型レンタルサーバー

 

 

ドメイン取得

 

 

お名前.com

 

定番のドメイン屋さん

 

 

 

オススメのテーマ

 

「やっぱり自作なんて無理だ…!」そう思う方へオススメの厳選WPテーマです。

 

New Standard Ver3

 

集客に特化した事業用テーマ

 

STREETIST(ストリーティスト)

 

とにかくオシャレなあなたに

 

ザ・トール

 

SEO・デザイン・機能の3拍子に定評

 

Emanon(エマノン)

 

Web集客に特化したテーマ

 

賢威

 

2万人を超えるユーザーが選んだ大ロングセラー

 

オープンケージ

 

ブロガー向けとして支持されているテーマ

 

LIQUID PRESS

 

プロが選ぶテンプレート

1354

PICK UP