2020/04/09 (更新日: 2020/05/24)

Bootstrapを使ったWordPressテーマ制作【解説動画つき】

Programming WordPress

そんな方向けにテーマの作成方法を解説します。

オリジナルテーマ作成にチャレンジしたい方向けにワードプレスの作成の基本を説明してきたいと思います。
なお本記事は、HTMLの基礎がわかる、WordPressを触ったことがある人向けです

HTML,CSSに関しては以下の記事を参考にしてください。

大学生がWEB制作を独学する手順【月20万稼いだ大学生が解説】

大学生がWEB制作を独学する手順【月20万稼いだ大学生が解説】お金のない大学生に向けた記事です。無料で学習できるサイトを紹介していきます。実体験として実績を積んでスキルを上げれば大学に行きながら月20万円も到達可能ですよ。

この記事を書いている僕はWordPressに関する自作テーマの作り方の動画を出したり「ゼロからはじめる　はじめてのWordPress自作テーマ制作」という書籍を出したりしました。(Kindle Unlimitedであれば無料)

もしWordPressのカスタマイズやテーマの作成をしているけど、うまくいかない💦
なんかエラーが出て自分のホームページをみることが出来なくなってしまった
という方がいたらご連絡ください。

Web制作の代行もしていますのでこちらからご連絡ください

僕もそうだったのですが、講師の方に聞いたら一瞬で解決したなんてこともあるのでエラーに詰まってやる気を無くしてやめたなんてことがないように願っています。

なお本記事はYoutube動画で解説したものになります
動画で一緒にコーディングしながら学習をしたい方はこちらの動画を参考にして学習してください

こんな感じのテーマを作ることが出来ますよ

https://shimotmk.com/mytheme/

本記事のもくじ

オリジナルテーマではなくWordPressのおすすめテーマが知りたい方はこちらの記事からどうぞ

Web制作者の僕が選ぶWordPressおすすめテーマ６種類

Web制作者の僕が選ぶWordPressおすすめテーマ。良質な無料テーマ３つとカスタマイズ性の高い有料テーマの３つを厳選してご紹介します。 今見ているサイトが使っているテーマを調べる方法を解説もしますのでテーマ選びに迷っている方は是非ご覧くださいませ。

１.開発環境を準備する

まずは、WordPressテーマを作るための開発環境を準備しましょう。エディター、WordPress開発環境の準備が必要です

該当する動画

• 01_WordPressテーマ制作:環境構築と完成イメージを確認しよう

開発環境はいくつかあるのですが、以下のアプリをインストールすればOKです

なお今回はエディターは、Visual Studio Code
WordPressの開発環境は、LocalbyFlywheel を使用します

もし使い慣れているものがあればそちらを使っていただいて構わないです

２.HTMLでベースとなるテンプレートを作る

HTML/CSSでテンプレートファイルを作っていきます。
今回はWordPressの基本的なテンプレート、トップページ、固定ページ、投稿ページを作っていきます。

該当する動画

• 02_WordPressテーマ制作:HTMLでヘッダー,グローバルナビ,ピックアップ記事を作る
• 03_WordPressテーマ制作：HTMLで記事一覧,サイドバーを作る
• 04_WordPressテーマ制作:HTMLでトップ,投稿,固定ページの３つを完成

ページはトップページ投稿ページ固定ページの３つになります。なおWordPressにはテンプレートファイルが用意されてます。

WordPressのテンプレートファイルの解説

WordPressにはテンプレートファイルがあります。

テンプレートファイル名 概要

なお、WordPressは全てのテンプレートがなくても動きます
テンプレートがない場合はindex.phpが表示されます

優先されるテンプレートファイルはこちらの表に書いてあるのでこちらを参考にすると良いと思います

PostTypeはWordPressの投稿タイプです。PostTypeで投稿されたものがテンプレートに従って表示されます

今回は404.phpなどは作っていないですが、その場合はindex.phpが表示される形になります

動画内で出来たファイルはこんな感じです
ご自身でオリジナルのものがあればそれを使っても大丈夫です！

３.WordPressテーマ化する

WordPressテーマとして認識させるためお決まりの置き方や必要なファイルがあります
それを書いていきましょう

該当する動画

• 05_WordPressテーマ制作:テーマとして認識させてパスを合わせよう
• 06_WordPressテーマ制作:サムネイルと記事一覧を表示させよう
• 07_WordPressテーマ制作:WordPressナビゲーションを作ろう
• 08_WordPressテーマ制作:タグを使ってピックアップ記事を作ろう
• 09_WordPressテーマ制作:ウィジェット機能を使おう
• 10_WordPressテーマ制作:投稿ページと固定ページを作ろう

テーマ化するときに基本的なPHPはfor,while,foreach,ifは必須です
もっと細かい部分に関しては、ググりつつ勉強していくのが良いと思います

よく使うプログラムは以下です

投稿記事の一覧を表示するプログラム

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<p>記事の内容</p>
<?php endwhile; else : ?>
<p>記事がありません。</p>
<?php endif; ?>


whileループを表示する中で記事のタイトルやサムネイルその記事のリンクなどを付けていきます

その際に必要な記述はこちらの表にまとめていますそして先ほど作った部分で共通部分は共通テンプレートに分けていきます。

共通テンプレートに分けることでそのファイルを呼び出すだけでそのテンプレートを使うことが出来ます。

なおWordPress機能もfunctions.phpに実装しています

今回実装した機能

• メニュー機能(register_nav_menus)
• サムネイル機能(add_theme_support)
• ウィジェット(register_sidebar)

functions.phpに記述して機能を実装しています

ここまでで出来たテーマファイルはこんな感じです！

4.サーバーにアップして公開する

サーバーにアップして公開しましょう
ここまではLocalというアプリを作ってWordPressを作ってきたのですが、このままでは自分のPCのみでしかみることが出来ません。

せっかくホームページを作ったので世の中に公開して誰でもみれる形にしましょう

該当する動画

• 11_WordPressテーマ制作:作ったサイトのデータを移行してサーバーに上げよう

そのためには、サーバーとドメインが必要です
サーバーはエックスサーバー、ドメインはお名前ドメインがおすすめです。

サーバーとドメインの契約がまだの方はこちらの記事を参考にWordPressのブログを立ち上げてください

【簡単】 WordPressでブログを始める6ステップ【初心者向け】

WordPressでブログをはじめたい人向け。本記事ではエックスサーバー でWordPressを始めるための手順を紹介しています。企業や個人向けに30以上のサイトを作った僕が画像付きで紹介しました。

まとめ:WordPress自作テーマを作ることは出来る

今回はWordPressの自作テーマの作り方を解説していきました。

是非、YouTube動画を見つつ手を動かしてテンプレートタグや必要な記述を使いながら慣れていきましょう
そして色々とカスタマイズをしつつ自分オリジナルのテーマを作成してみてください

そして、Twitterとかでシェアしていただけると今回の記事や動画を作って良かったな〜と思うのでよろしくです。

もし何かうまくいかないことやテーマのカスタマイズをして欲しいなどありましたらこちらからお気軽にメッセージいただければと思います

今回紹介したリンク

• WordPress自作テーマを作ろう(YouTube動画)
• ゼロからはじめる　はじめてのWordPress自作テーマ制作 (Kindle本)
  Kindle Unlimitedで無料
• よく使うテンプレートタグまとめ（表）
• 今回作ったテーマ

追記

ありがたいことに、たくさんの方から嬉しいお言葉いただけました
ためになったらシェアして頂けたらとても嬉しいです😊
シェアして頂いた人は全てのせたつもりですが載ってなかったらすみません🙇‍♂️

Bootstrap Web制作