【発表】WordPress自作テーマをつくったので作り方解説【制作期間3週間】

こんにちはナンブです。
今回はWordPress自作テーマをつくってみたので、つくり方の紹介とWordPressテーマをつくるとき、Bootstraptとslick(スライドバー)をつかいたいひともいるので、使い方、schema.orgの構造化マークアップについて、自作テーマをつくるべきかについて解説していきたいと思います。

自作した理由として、ぶっちゃけですが、つくってみたいなとおもったからです。そんだけ。

ともかく本題にはいりましょう

本記事の内容

WordPress自作テーマ作成手順【ボクもおなじ感じでつくりました】
構造化マークアップについて【テーマつくるうえで超重要！】
おまけ①WordPressでのBootstraptとslickの対応方法【プラグイン使用】
おまけ②自作テーマをつくるべきか【これについてググっている＆迷うぐらいならつくろう！】

まずはつくる前に必要になるファイルを紹介します

基本必要なもの

index.php←（ホームページ）
single.php ←（投稿ページ　本記事）
page.php←（固定ページ）
sidebar.php←（文字通り）
footer.php←（フッター）
archive.php←（記事一覧ページ）
――――――――――――
function.php←（必ずいるファイル＆機能追加）
style.css（ページデザイン）

用意すべきファイルはこんな感じですね
お次は、ボクがつくったファイルですね。上のファイルの追加でつくったものです

class-wp-bootstrap-navwalker.php(bootのナビバーを対応させるために必要なファイル)
breadcrumb.php（パンくずリスト)
related.php(関連記事 ←追加するならこれ重要）
sidebar.php(サイドバー)
searchform.php（検索フォ―ム）
header.php
sass←(ページのデザイン）など

↑※気になる人は詳しくはScss(sass)の使い方のyoutubeで検索を
外観はcssというよりもScssををつかってコーディングしました

ブログのテーマにつけたしたい要素があれば、このように新しいファイルをつくる場合もあります。ここは、自分のつくりたいテーマにあわせて調整ですね
作成する前にWordpressの勉強法について知りたい方は以下の記事も参考になるので、チェックしとくのもよいでしょう

WordPress自作テーマ作成手順【ボクもおなじ感じでつくりました】

まずはなにをどんなふうなデザインのブログテーマにしたいかを決めます。この段階からはじめないとダメですね。

テーマのデザインを変更したのは、header右のSNSの部分でやっぱいらねとおもい、消したり、位置を微調整したぐらいですね
つくりながらデザインをきめるでもいいのですが、それだと途中で無駄にアイデアばかりがわいてなにをつくりたいのか軸がさだまらなくなり、時間のロスにつながります

デザインをつくってから、ぼくみたいにつくりながらSNSの部分をけずるといったことをするくらいならいいですが、基本はデザイン案のとおりにすすめていきます。

ここで、一応、ボクのテーマを紹介しときます

まあ、いまつかっているサイトテーマですｗ
デモサイトのほうのリンクつけておきますね。こっちのほうがテーマ適用前どんな感じなのかわかりやすいとおもうので

自作テーマをつくる際に参考にしたYouTube

ブログテーマのおおまかなデザインをきめたのち、さっそく、テーマをつくっていきます。
ここですみません。自作テーマをつくる際以下のかたの動画をみながらつくってみてください。

しもむらさんのWordPress講座

たにぐちまことさんの講座

このお二方の動画をみながら自作テーマをつくりました。
どちらもおすすめですが、自作テーマとなると、index.htmlやstyle.cssをいちからコーディングしてテーマをつくっていくので、基本、しもむらさんのWordPressテーマ作成動画をみとくとよいでしょう。

ボクはしもむらさんの動画をみながら、たりない＆不明点はたにぐちさんの動画＆ググりながら解決しました。この二つの動画をみておけば、つくりかたの流れが把握できるので,動画をみながら作り方を把握して自分なりのテーマに仕上げていく感じです

しもむらさんWordPress講座発展

しもむらさんの動画に関しては二種類あります。カンタンにいっちゃえば、11この作り方編と22このプラスαで追加したい機能編のふたつです
とりあえず、自分のつくりたいテーマに近づけることからはじめましょう。もう一つの動画に関しては、追加したい機能があれば、自己判断でいじってみてください。

構造化マークアップについて

構造化マークアップとは、ぶっちゃけ、ぼくもあんまよくわかりませんでした。ですが、サイト作成の際には必ずといっていいほど重要です
簡単にいえば、自分のサイトの構造を検索エンジン（google)にわかりやすくつたえる
ために専用のcodeをつけくわえることです。

サイト作成後、構造化マークアップについてですが、こちらもスミマセン、マナブさんの記事がおおいに参考になるとおもいます。ざっくりとカンタンに解説されておられるので。

ここで注意点で上記の記事内にはかかれてない＆更新されてない内容があるので、プラスαで紹介します

上記の記事の変更点

schema.orgで『パンくずリスト』のマークアップ　今までは↓

<span class="" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

data-vocabulary.org スキーマのサポートは終了したらしいのでこのままだと使えません。
なので、以下のCODEをかわりにつかいます

<div class="breadcrumb"itemscope itemtype="https://schema.org/BreadcrumbList"&gt
<li class="breadcrumb-item" itemprop="itemListElement"itemscope itemtype="https://schema.org/ListItem">
<a class="bread-a" href="" itemprop="item"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1"/></li>

これをぶちこんでください。これでOKです

追加点

dateModified（記事の更新日）

itemprop="dateModified"

datePublished（記事の公開日）

itemprop="datePublished"

mainEntityOfPage（記事の URL）

itemprop="mainEntityOfPage"
mainEntityOfPageはべつに必須ではないですが、一応いれとくと無難でしょう
記事ページの主要トピックにmainEntityOfPage を指定。

author（著者名）

<div itemprop="author" itemscope itemtype="https://schema.org/Person" style="display:none;">//display:none;入れときました
 < span itemprop="name">なまえ</span></div>;

publisher（組織情報をわからせる)

publisherではロゴ画像を指定します。組織名をいれる感じかな

<div itemprop="publisher"itemscope itemtype="https://schema.org/Organization"style="display:none;">//display:none;入れときました
<span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><span itemprop="url" content="ロゴ画像"></span></span><span itemprop="name">なまえ</span></div>

authorとpublisherですが、footer部分に追加してdisplay:none;で非表示にしておきます
なるべく、メインページの構造化マークアップはできるだけちゃんとしておくように
不明な部分がでてきたら、ググりながら再度解決しましょー

※タグの使い方

たぶん、ここが抜けてしまうひとが多いとおもうんでついでに紹介しときます

やれてないひとがおおいっぽいので,ちゃんと構造化マークアップをやるついでに確認を
構造化マークアップの詳しいことはこちら↓

おまけ①WordPressでのBootstraptとslickの対応方法【プラグイン使用】

ボクのテーマでは、bootstraptとslick(スライドバー)をとりいれています。
このプラグインをどうにかWordPressテーマに対応させたいという需要もあるとおもうので紹介します。

ボクのテーマを例に解説していくと、Bootstraptはピックアップ記事のカールセル、ナビバーの二つの機能をつかっており、読まれる記事の部分のスライドバーはslickをつかっています。

カールセル・ナビバーのほうをつかうとき、WPに対応させるための専用ファイルとcodeがひつようBootstarapt4.3バージョン。読まれている記事＆関連記事のほうがSlickというものを使用

boot5もつかえるんですが、現在はWPに対応しているバージョンが4.3までしかできてないので断念してこのバージョンを使用。
上記で紹介したclass-wp-bootstrap-navwalker.phpについても書きたかったのですが、割愛します。

おまけ②自作テーマをつくるべきか【迷うぐらいならつくろう！小遣い稼ぎ目的ならしなくてよい】

マネー
結論、目的がブログをかくだけならつくらなくていいです。

ただ、プログラミング学習を目的として、WordPressテーマをつかってサイトをつくったり、サイト制作してみたし、なんかつくりたいものが浮かばない、テーマをつくってみたいと１ミリでも思いまよってるならさっさとつくったほうがいいです

ボクが６月中旬からつくりはじめてだいたい3週間＋調整に５日間かかったので。時間があるうちにうごいてしまったほうがいいです。まよったすえ時間だけすぎてしまったので。

自作テーマをつくる＆案件を行うまえにブログテーマはどんなものなのか、運用になれるという名目でほかのテーマを使ってみるのもアリです
ブログをかきたい＆ためしに自作テーマつくるまえに別のテーマを利用してみたいという方は一応、無料テ―マでもいいですが、マナブさんのテーマをオススメします。

なんでオススメするかは、マナブさんは元フリーランスエンジニアのかたでサイトのSEO対策は万全ですし、自作するうえでなにがしか参考にしやすいのではと思い、オススメしました。また、価格も6000円代なのでほかのテーマに比べて安価なのでチェックしとくのもアリです。

自作するまえにボクもかなり気に入ってつかってました
ボクのテーマもマナブさんのテーマのデザインによせてます
これでも、あまり納得のいくかたはいないとおもうので詳しく自作するべきかの深堀りについてはまた、別の機会にでもはなします

ということ今回は以上となりますー