WordPressテーマの作り方【HTMLをワードプレス化で自作する】

man

困ってる人

自分で作ったサイトにワードプレスの機能を取り入れるには、一体どうやればいいんだろう?
PHP?とかあんまり難しい事は分からないんだけど


こんにちは、よろと申します。

という事で今回、シンプルなWordPressテーマを作ってみました。

今見ていただいている、こちらブログのテーマが今回自作したものになるのですが、

今回は、WordPressテーマを作る際に参考にしたサイトや、勉強方法、手順を、自分なりに大まかにまとめてみました。

まず、WordPressテーマを作るにあたって必要な事は、

  • HTMLとCSSをある程度理解できる。
  • WordPressでブログをやった事のある、もしくは、触った事がある。
  • 基本的なWordPressとPHPの知識がある。
  • もし、HTMLやCSSが分からないという人は、「Progate(プロゲート)」「ドットインストール」などで勉強するといいでしょう。

    「WordPress」と「PHP」に関しても「ドットインストール」で勉強できます。


    WordPressテーマを作るための手順【ワードプレス化する方法】

    WordPressテーマを作る手順を大まかに説明すると、

    • 1. XAMPP(ローカル環境)にWordPressをインストール
    • 2. WordPressの設定
    • 3. HTML、CSSのファイルの準備
    • 4. 作成したHTMLファイルをワードプレス化(ファイルの分割 → index.phpを分けていく作業)

    今回紹介するのは4番目の、HTMLファイルをWordPress用に分割していく作業になりますね。

    今回の内容は「ドットインストール」の動画を見ながら、自分で実際に入力をしながらまとめたものなので、

    もし、自分で動画を見ながら一から入力するのが面倒だという人は、下にHTMLとCSSを書いたものを用意しておきましたので、そちらを利用するといいでしょう。

    【今回使うテーマのHTML, CSSのコード】

    See the Pen
    ZwEaWp
    by みあちゃん❤️Web制作始めました (@malg_tw)
    on CodePen.

    WordPressテーマを作るためにファイルを準備し、分割していく

    ①「index.html」のファイル名を「index.php」に変更

    まずは、自分のパソコンの「C:ローカルディスク」 → 「xamppフォルダ」の「htdocs」の中の「wordpress(自分で作ったデータベースのフォルダ)」の「wp-content」の中の「themes」フォルダの中に、今回新しく作るWordPressテーマ用のフォルダを作る

    このフォルダの中に、自分で作ったWordPressテーマ用の「HTML(index.html)」「CSS(style.css)」、画像ファイルなどを全て入れ、

    「index.html」のファイル名を「index.php」に変更

    ②「style.css」にヘッダー情報を入れる

    https://codex.wordpress.org/Theme_Development」にアクセスすると、

    こういった感じのものが書いてあるので、この部分をコピーして「CSSファイル(style.css)」に貼り付け、内容を書き換える。

    このようにCSSファイルのヘッダー情報を書き換える事により、自分のWordPressテーマが適用出来るようになる。

    ※ファイルへのアクセス(ログイン)方法は、http://localhost/WordPress用に作ったフォルダの名前/wp-admin/

    ③WordPress用のファイルを準備する

    ①で作ったフォルダの中に、「header.php」「footer.php」「sidebar.php」「functions.php」を新しく作る。

    ④ファイルの分割 – 「header.php」

    上記のHTMLのヘッダー部分をカットして「header.php」に貼り付け

    そして、切り取った部分には、

    と書く。

    (これを入れる事によって「index.php」が読み込む時に、自動的に「header.php」を読み込んでくれる)

    ⑤「sidebar.php」「footer.php」

    次に、サイドバー部分、

    HTMLのサイドバー部分を切り取り、

    と書き、切り取った部分はそのまま「sidebar.php」に貼り付け。

    そして次に、フッター部分「footer.php」、

    を切り取り、 切り取った部分に

    を貼り付け。

    WordPressテーマ(ファイル全体)にCSSが適用されるように、ヘッダー部分を修正

    「header.php」

    に変更する事で、ファイル全体にCSSが適用される。

    次にタイトル部分、

    次に、

    「header.php」「h1」(ブログタイトル部分)

    に書き換え。

    そして次に、リンク部分

    ⑥固定ページのメニューバー部分「functions.php」

    固定ページのメニューバー部分は、管理画面からいろいろとカスタマイズ出来ると便利なので、その為には「functions.php」を作る必要がある、

    「functions.php」に

    と入力。

    次に、

    「header.php」の、メニュー部分、

    と書く。(切り取ったメニュー部分は必要ない)

    ※これをやる事によって、ワードプレスの管理画面の「ダッシュボード」→「外観」→「メニュー」から固定ページを追加出来るようになる。

    そして、「header.php」に、

    ⑦サイドバーをウィジェット対応にする「functions.php」

    サイドバーをウィジェット対応にする為に「functions.php」に、

    と追加する事によって、ワードプレス管理画面(ダッシュボード)に「ウィジェット」が追加される。

    ⑧ウィジェットを呼び出すようにするには「sidebar.php」

    実際に、ウィジェットを呼び出す場合は「sidebar.php」の、

    記事一覧部分(POST部分)「index.php」

    記事一覧(POST部分)を何度も繰り返す仕様にするために「index.php」の

    の前後に「PHP」で、ループ(繰り返し処理)の指示を出してやる必要がある。

    「index.php」の、

    の手前部分に、

    次に、

    この閉じタグ部分の後に、

    と追加(このループ命令文の中に記事がある間はずっと繰り返すという指示)

    記事タイトルと日付、カテゴリー部分

    次に、記事タイトル部分、

    次に、日付の部分とカテゴリの部分、

    次に、本文の抜粋部分、

    アイキャッチ画像を管理画面から指定出来るように

    アイキャッチ画像も、管理画面から指定が出来ると簡単で便利なので「functions.php」に、

    を追加する事によって、投稿画面からアイキャッチ画像を指定出来るようになる。

    そして次に、

    そして、画像のリンク部分に

    を追加する事によって、サムネイル画像を取得出来るようになる。

    ナビゲーション部分とフッター部分

    そして、次にナビゲーション部分、

    というタグを必ずループの外に書く。

    そして、次にフッター部分を変更、

    と書く事により、年が変われば自動的にフッターの日付も変わるようになる。

    そして、BODYの閉じタグ の手前に必ず、

    を入れる。

    (これを入れないとフッターが表示されなかったり、動かないプラグインが出てくる事もある)

    個別記事部分「single.php」

    個別記事部分は、見た目がほとんど「index.php」と同じなので、

    「index.php」をフォルダ内でコピーして、名前を「single.php」に変える。

    そして、個別記事部分にはアイキャッチ画像は必要ないので、

    を削除し、post-contentクラスの中に、

    次に「single.php」のナビゲーション部分に関しては、

    という風に変更し、そのままループの中に入れてあげる必要がある。

    (今回の場合だとpostの後、endwhileの手前にこのコードを追加する)

    固定ページ「page.php」

    固定ページは「single.php」をコピーして、名前を「page.php」に変更

    時系列部分

    と、

    ナビゲーション部分(次へ、前へ)

    は、必要ないので削除。

    削除したら、

    最後に

    という風に今回は、HTML、CSSのファイルをWordPressテーマ用に変換するという作業を大まかにまとめてみました。

    ただ、実際に動画を見ながらそのままやるのと、実際に一から作ってみるのとでは、

    かなりの違いがありますので、一度試しにシンプルなテーマでも作ってみるといいでしょう。

    あと、作業をしていてもし分からない事があれば「Teratail(テラテイル)」に登録をしておいて、すぐさまこちらで質問をしてみるといいです。

    ※「Teratail(テラテイル)」とは、Yahoo!知恵袋のような質問箱のサービス。

    プログラミングを独学をしている人にとっては登録必須のサービスですね。

    プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール