WEBサイト制作はフリーランスしもむらへ【神奈川 東京】

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

Programming WordPress

WordPressを使ってホームページを作ったことがあるけど自分でカスタマイズしたい。オリジナルテーマの作成方法を知りたい

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

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

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

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

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

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

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

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

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

https://shimotmk.com/mytheme/

本記事のもくじ

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

1.開発環境を準備する

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

該当する動画

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

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

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

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

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

該当する動画

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

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

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

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

index.php(必須) ワードプレス必須のテンプレート。
style.css(必須) スタイルシートのテンプレート
single.php 投稿用のテンプレート
page.php 固定ページ用のテンプレート
search.php 検索結果用のテンプレート
sidebar.php サイドバーのテンプレート

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

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

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

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

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

3.WordPressテーマ化する

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ループを表示する中で記事のタイトルやサムネイルその記事のリンクなどを付けていきます

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

header.php ヘッダーのテンプレート。
footer.php フッターのテンプレート
sidebar.php サイドバーのテンプレート
searchform.php 検索窓のテンプレート
functions.php 機能実装するファイル(必須)

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

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

今回実装した機能

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

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

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

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

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

該当する動画

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

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

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

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

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

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

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

今回紹介したリンク

追記

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

RELATED