テーマを自作！オリジナルのWordPressテーマを制作する手順【徹底解説】

みなさんこんにちは！エンジニアの高澤です。
今回は実案件で使えるレベルでWordPressのテーマを自作する方法を解説しながら、ブログのデモサイトを作っていきたいと思います。
このデモサイトですが、これまでエンジニアである筆者が開発してきた中で実案件で実際にあった要件を盛り込んだデモサイトとなっておりますので、記事の内容通りに進めていただければ高度にカスタマイズされたテーマを、実際の現場レベルで使うことができます。
WordPressはとても奥が深いので、初心者の方には本質的に理解することは難易度が高いかもしれませんが、１つひとつわかりやすく解説しておりますので無理なく進めることができます。
WordPress特有の機能であるカスタムフィールドやカスタム投稿タイプなどがよくわからない方、またWordPressについてまだよくわからない方でもテーマ作成について理解でき、人に説明することができるようになるとともに、高品質なテーマをご自身で作ることができるようになるので、ぜひ当記事をご活用していただければと思います。

自作する前にWordPressの基本のおさらい

WordPress初心者の方、またはそもそもWebサイト制作の初心者の方はWordPressって何？と疑問にもたれていることと思います。
なのでテーマ作成に入る前に、「そもそもWordPressってなに？」や「テーマとは？」の疑問について説明します。

WordPressとは

そもそもWordPressとは？というお話ですが、WordPressとはCMS（コンテンツ・マネジメント・システム）というソフトウェアのことで、サーバーにインストールするだけで投稿機能などが初めから備わったWebサイトのことです。
このCMSは、プログラミングの知識がない人でも簡単にサイトを立ち上げられることを目的に作られたものですが、サイトとして重要な見た目の部分や機能などを自由にカスタマイズするとなると、プログラムで作られている以上プログラミングの知識がどうしても必要になります。
当記事ではサイトの見た目（デザイン）の部分であるテーマの作成方法について作れるようになることを目的に解説いたします。

WordPressのテーマ作成とは

そもそもWordPressのテーマってなんのこと？という方はいらっしゃるかと思います。
WordPressのテーマとは、Webサイトの見た目のテンプレートのことです。
そもそもこのWordPressはCMS（コンテンツ・マネジメント・システム）であり、初めからWebサイトとしての管理・運用機能を備えているのでサーバーへインストールすればすぐに管理画面から記事の文章やタイトルなどを入力してWebサイトを管理運用することができます。
その管理画面で入力した内容をユーザーの目に見える形でWebサイトとして表示してくれるものが今回作成するテンプレート、つまりテーマです。

テーマ作成をするメリット

WordPressのテーマは世界中の多くの開発者によって作られており、数えきれないほどの数のテーマが無料で配布されています。
よりクオリティの高いテーマを使いたければ有料のテーマを購入して使うこともできます。
お金もしくは労力をかけなくてもすでにこれだけ良いことがありますが、ここで疑問なのがなぜインストールすればすぐに使えるのにわざわざテーマを自作する必要があるのか？ということです。
ご安心ください。自作することにはちゃんと下記のようなメリットがあります。

自分の思い通りのデザイン、機能でWebサイトを作れる
世界で最も使われているCMSであり、多くの人に親しみがある
ネットや書籍など情報がかなり豊富で開発の時に困らず安心できる
意図したSEO対策の実装が可能
自作なのでファイルの構造が把握でき、後々の修正作業がスムーズになる

また、WordPressはWeb制作の案件でよく利用されるCMSであり、スクラッチ開発より技術が簡単で安く早く開発ができるという面もあり、クライアントに喜ばれる大変便利なCMSです。
上記の事実から、WordPressでのテーマ作成に価値・メリットがあると僕は考えております。

WordPress本体ファイルを公式サイトからダウンロードする

WordPressでWebサイトを制作するには、WordPressの本体ファイルをダウンロードしサーバーにアップしなければテーマ作成ができません。
まずはじめにやることとして、WordPressの公式サイトからWordPress本体ファイルをダウンロードしましょう。

WordPress本体ファイルのダウンロードのやり方

①WordPress.orgというWordPressの公式サイト（URL：https://ja.wordpress.org/）のページを開き、「WordPressを入手」というボタンをクリック

②「WordPress○.○.○をダウンロード」のボタンをクリック。

上記2ステップで本体ファイルをzip形式のデータでダウンロードできます。
ダウンロードした本体ファイルは、このあと後述するローカルサーバー（MAMPもしくはXAMPP）にアップします。
WordPressはPHPというプログラミング言語で作られているため、サーバーにアップしないとブラウザから管理画面などを表示し操作することができません。
なのでサーバーにアップロードしてセットアップ（データベース接続などしてサイトの立ち上げ）をしなければなりません。
ただここでは一旦デスクトップに保存しておき、ファイルの中身をざっと見てどんなファイル構造になっているのかだけ確認してみましょう。

WordPressのファイル構成と独自のテンプレート一覧

WordPress本体ファイルの中身をご確認していただくと「wp-content」というファイルがあるかと思います。
そのファイルを開いた先の「themes」というファイル（wp-content/themes/の階層）に「sampleblog」というファイル（テンプレートの入れ物）をご自身で作成し、これからご説明するテーマを成り立たせるためのに必要なPHPファイルやCSSファイルなどを「sampleblog」ファイルに用意します。
つまりこういう階層になります→wp-content/themes/sampleblog/
そして、当記事で作成するPHPファイルは下記の内容になります。 WordPressの仕様でテンプレートファイル名が決められているので、それに沿って作っていきます。

テンプレート名	テンプレート内容
archive.php	記事一覧のテンプレート。
category.php	カテゴリーアーカイブのテンプレート。
footer.php	フッターのテンプレート。
front-page.php	トップページのテンプレート。
functions.php	WordPressの機能をカスタマイズするためのテンプレート。
header.php	ヘッダーのテンプレート。
index.php	テーマに最低限必要な基本テンプレート。404もしくは該当するページがなければすべてindex.phpのページに遷移する。
page.php	固定ページのテンプレート。
search-list.php	（※当記事オリジナルのテンプレートで、WPの方で特に決まりはありません）サイト内検索（search.php）をしたときに一覧のコンテンツを表示するためのテンプレート。
search.php	サイト内検索の検索結果のテンプレート。
searchform.php	サイト内検索の検索ボックスのテンプレート。
sidebar.php	サイドバーのテンプレート。
single-sample.php	カスタム投稿タイプのテンプレート。{sample}の部分はカスタム投稿タイプの名前になります。（当記事では「sample」）
single.php	投稿記事のテンプレート。
style.css（WP登録用CSS）	WordPressにWordPressのテーマとして使えるようにするためのCSSファイル。
tag.php	タグアーカイブのテンプレート。
reset.css（リセット用CSS）	Webサイト制作でよく利用されるリセットCSS。ブラウザのデフォルトでかかってしまうCSSの対策をするためのもの。
sample.css（デザイン用CSS）	当記事で作成するテーマのCSS。こちらのCSSでサイトをデザインします。

上記のPHPファイルをWordPressではテンプレートと呼んでいます。
「テンプレート」とは、WordPressの仕様で決められたファイル名のついたPHPファイルのことをいいます。
例えば、WordPressには決まりごととして、ヘッダーはheader.php、フッターはfooter.phpとそれぞれサイトの部品ごとにPHPファイルが割当てられます。
もし仮にheader-sample.phpやfootertemplate.phpという適当なファイル名でヘッダーやフッターとしてテンプレートを作っても、それらは普通にPHPファイルとして読み込むことはできますが、WordPressにおいてのヘッダーやフッターとして専用のPHP関数（WordPress関数）では読み込まれません。
なので、header.phpとfooter.phpという仕様どおりのテンプレート名を割り当てていくわけです。
ですが必ずしもheader.phpやfooter.phpを作らなければいけないという決まりはありません。
詳しくは後述しますが、最低限index.phpとstyle.cssの２つのファイルがあればテーマは作れてしまいます。
ただその２つだけだと使い勝手が悪かったり、本格的なデモサイトを作ることをゴールにすると当記事でご紹介する制作のノウハウが必須になりますので、もう少し時間をかけて部品ごとにテンプレートを作るなどして開発することをおすすめします。
テンプレートについてはこれから作成手順の中で都度ご説明いたします。

WordPressのテンプレート階層とは

WordPressにはテンプレート階層という仕組みがあります。
テンプレート階層とは、テンプレートが読み込まれる優先順位のことをいいます。
最終的に行き着くのは「index.php」であり、「index.php」が最低限テーマを成り立たせる重要なテンプレートとなります。
下記の図で左から順に読み込まれるので、ご確認いただければと思います。

引用：WordPress Codex テンプレート階層概観図参照：テンプレート階層の解説ページをみる

WordPressを動かすために必須のサーバー環境構築方法

結論から申しますと、WordPressのテーマ作成しようと思ったら「XAMPP」もしくは「MAMP」のインストールが必要です。
「XAMPP」「MAMP」とは、PC内（ローカル）にサーバー環境を用意できるソフトウェアのことです。
ローカルサーバーの環境構築をする理由は、WordPressはPHPというプログラミング言語で作られているからです。
PHPはサーバー上で動く言語なので、必ずサーバーを用意しないと動きません。
サーバーはローカルサーバーでも、本番公開するためのプロバイダが提供する有料のサーバー（共用サーバーやVPSなど）でもどちらでもPHPは動きますが、今回はWordPressのテーマ作成を作るまでが目的なので、ローカルサーバーを使います。

ローカルサーバーの種類

ローカルサーバーの種類は、

MAMP（主にMacで使われています）
XAMPP（主にWindowsで使われています）

の主に上記2種類です。
どちらも無料で、パソコンにインストールするだけで環境構築できてしまいます。
当記事では、 Macを使われている方は→「MAMP」 Windowsを使われている方は→「XAMPP」をおすすめします。

ローカルサーバーの使う場面

ローカルサーバーはPCの中でサーバ環境が用意できる大変便利なツールですが、その使いどころは様々です。例えば、
・本番環境にアップする前にテストサーバーで作業したい場合 ・PHPやJavaScriptのAjaxなどのサーバー環境が必要なプログラムを使う場合
上記などのような場面でローカルサーバーは必要になります。
当記事ではMAMP・XAMMPの使い方に触れてしまうととんでもない文量になってしまいますので、 「MAMPもくはXAMPPの使い方やインストール方法がよくわからない…」という方はぜひ下記の記事をご覧ください。

テーマ作成の流れ

実際にテーマ作成に入る前に、テーマ作成の実装の流れを確認しておきましょう。筆者的には下記の流れで進めるのが良いかと思っております。

ステップ①HTMLとCSSで静的なサイト（見た目）を作成するステップ②HTMLのファイル名をindex.phpに書き換えるステップ③index.phpの内容をヘッダー、サイドバー、フッターなどコンテンツごとに分割するステップ④プログラムの内容をPHP（WordPress関数など）で書き直すステップ⑤プラグインなどで必要な機能を追加してカスタマイズする

ざっくりと上記の流れに沿って制作していきます。また、下記のサイトが完成イメージです。

まずはHTMLでコーディングする

それではまず初めに、HTMLとCSSでWebサイトの見た目を作っていきましょう。先に作るメリットは、

・先にHTMLとCSSで作ってしまえば後から自動化すべきところだけPHPで書き換えれば済む・HTMLとCSSの状態でバックアップでき、見た目の部分は保証される・HTMLとCSSでのコーディングはPHPをサーバーでコーディングするよりキャッシュがない分早い

上記の理由から、当記事ではまずはHTMLをコーディングします。ここで作成するファイルは「index.html」と「sample.css」の２つです。
下記の図のような構成で作成してください。

HTMLとCSSを作成

下記のコードをコピペしてindex.htmlとsample.cssを作成しましょう。

クリックでindex.htmlのソースコードを展開する

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SAMPLE BLOG</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/sample.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>

    <div class="container">
        <header>
            <div class="header">
                <div class="header-left">
                    <a href="#"><img src="./image/sample-logo.png" alt=""></a>
                </div>
                <div class="header-right">
                    <div class="header-right-l">
                        <form class="header-right-l-form" action="./index.html" method="get">
                            <input type="text" placeholder="キーワード検索" value="">
                            <button type="submit" value=""><i class="fas fa-search"></i></button>
                        </form>
                    </div>
                    <div class="header-right-r">
                        <a href="#">お問い合わせはこちら</a>
                    </div>
                </div>
            </div>
        </header>
        <nav>
            <div class="nav">
                <ul>
                    <li><a href="#">メニュー1</a></li>
                    <li><a href="#">メニュー2</a></li>
                    <li><a href="#">メニュー3</a></li>
                    <li><a href="#">メニュー4</a></li>
                    <li><a href="#">メニュー5</a></li>
                </ul>
            </div>
        </nav>

        <div class="main-container cf">
            <main>
                <div class="list-box">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(12)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-2.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(11)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-3.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(10)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(9)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-2.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(8)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-3.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(7)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(6)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-2.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(5)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-3.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(4)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(3)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="pagenation">
                    <ul class="cf">
                        <li class="active">1</li>
                        <li><a href="#">2</a></li>
                        <li class="next"><a href="#">次へ &gt;&gt;</a></li>
                    </ul>
                </div>
            </main>
            
            <aside>
                <div class="sidebar">
                    <div class="widget">
                        <h2>人気記事ランキング</h2>
                        <div class="ranking-box">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-1.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-2.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-3.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-4.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-5.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="widget">
                        <h2>最新の記事一覧</h2>
                        <div class="newpost-box">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-1.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-2.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-3.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-1.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-2.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="widget">
                        <h2>カテゴリー</h2>
                        <div class="sidebar-cat">
                            <ul>
                                <li><a href="#">カテゴリー<i class="fas fa-angle-right"></i></a></li>
                                <li><a href="#">未分類<i class="fas fa-angle-right"></i></a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="widget">
                        <h2>タグ</h2>
                        <div class="sidebar-tag">
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                        </div>
                    </div>

                    <div class="widget">
                        <h2>アーカイブ</h2>
                        <div class="archive">
                            <div class="archive-2020">
                                <span><img src="./image/sample-arrow.png"><a href="#">2020(5)</a></span>
                                <ul>
                                    <li><a href="#">2020/3(1)</a></li>
                                    <li><a href="#">2020/2(2)</a></li>
                                    <li><a href="#">2020/1(2)</a></li>
                                </ul>
                            </div>
                            <div class="archive-2019">
                                <span><img src="./image/sample-arrow.png"><a href="#">2019(7)</a></span>
                                <ul>
                                    <li><a href="#">2019/12(5)</a></li>
                                    <li><a href="#">2019/11(2)</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>

        <footer>
            <div class="footer">
                <div class="footer-left">
                    <h2><a href="#"><img src="./image/sample-footer-logo.png"></a></h2>
                    <ul class="cf">
                        <li><a href="#">メニュー①</a></li>
                        <li><a href="#">メニュー②</a></li>
                        <li><a href="#">メニュー③</a></li>
                        <li><a href="#">メニュー④</a></li>
                        <li><a href="#">メニュー⑤</a></li>
                    </ul>
                </div>
                <div class="footer-right">
                    <a class="twitter-timeline" width="240" height="270" href="https://twitter.com/minweb_selrea?ref_src=twsrc%5Etfw">Tweets by minweb_selrea</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    <div class="fb-page" data-href="https://m.facebook.com/minwebcom/" data-tabs="timeline" data-width="315" data-height="270" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://m.facebook.com/minwebcom/" class="fb-xfbml-parse-ignore"><a href="https://m.facebook.com/minwebcom/">DIGITOR -みんな使えるWeb活用術</a></blockquote></div>
                </div>
            </div>
            <div class="copyright">
                <p>Powered by minweb.com template Selrea,Inc</p>
            </div>
        </footer>
    </div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

<!doctype html>

<html>

<head>

<title>SAMPLE BLOG</title>

</head>

<body>

</div>

</form>

</div>

<a href="#">お問い合わせはこちら</a>

</div>

</header>

<nav>

<ul>

</ul>

</div>

</nav>

<main>

<ul>

<li>

</div>

<h2>ブログ記事タイトル(12)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(11)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(10)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(9)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(8)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(7)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(6)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(5)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(4)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(3)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

</ul>

</div>

</ul>

</div>

</main>

<aside>

<h2>人気記事ランキング</h2>

<ul>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

</ul>

</div>

<h2>最新の記事一覧</h2>

<ul>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

</ul>

</div>

<h2>カテゴリー</h2>

<ul>

<li><a href="#">カテゴリー<i class="fas fa-angle-right"></i></a></li>

</ul>

</div>

</div>

<h2>アーカイブ</h2>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</aside>

</div>

</ul>

</div>

<a class="twitter-timeline" width="240" height="270" href="https://twitter.com/minweb_selrea?ref_src=twsrc%5Etfw">Tweets by minweb_selrea</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<div class="fb-page" data-href="https://m.facebook.com/minwebcom/" data-tabs="timeline" data-width="315" data-height="270" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://m.facebook.com/minwebcom/" class="fb-xfbml-parse-ignore"><a href="https://m.facebook.com/minwebcom/">DIGITOR -みんな使えるWeb活用術</a></blockquote></div>

</div>

<p>Powered by minweb.com template Selrea,Inc</p>

</div>

</footer>

</div>

</body>

</html>

クリックでsample.cssのソースコードを展開する

@charset "utf-8";

body {
    font-family: "Noto Sans Japanese", sans-serif;
    background:#f4f4f4;
}
img{
    max-width:100%;
    height:auto;
    vertical-align:middle;
}

/* ヘッダー */
header{
    background:#fff;
}
.header{
    width:1000px;
    margin:0 auto;
    padding:40px 0;
    display:flex;
}
.header-left{
    width:500px;
}
.header-left a img{
    width:330px;
}
.header-right{
    display:flex;
    justify-content:space-between;
    width:500px;
}
.header-right-l{

}
.header-right-l-form{
    display:flex;
    width:230px;
    height:40px;
    margin-top:20px;
    background:#eee;
    border-radius:20px;
    margin-right:30px;
}
.header-right-l-form input[type="text"]{
    width:190px;
    height:40px;
    padding-left:20px;
    border:none;
    background:#eee;
    border-radius:20px 0 0 20px;
    outline:none;
}
.header-right-l-form button[type="submit"]{
    width:40px;
    height:42px;
    padding-right:10px;
    border:none;
    background:#555;
    border-radius:0 20px 20px 0;
    outline:none;
    cursor:pointer;
}
.header-right-l-form button[type="submit"] .fa-search{
    color:#fff;
    font-size:18px;
}
.header-right-r{

}
.header-right-r a{
    display:block;
    width:240px;
    background:#69a4db;
    color:#fff;
    font-weight:bold;
    padding:30px 0;
    border-radius:12px;
    text-align:center;
}

/* グローバルナビゲーション */
.nav{
    margin-bottom:70px;
    background:#e5e5e5;
    box-shadow:0 3px 3px #999;
}
.nav ul{
    display:flex;
    width:1000px;
    margin:0 auto;
}
.nav ul li{
    width:200px;
    text-align:center;
    border-left:1px solid #bfbfbf;
}
.nav ul li:last-child{
    border-right:1px solid #bfbfbf;
}

.nav ul li a{
    display:block;
    padding:30px 0;
    background:#e5e5e5;
    color:#69a4db;
    font-weight:bold;
    transition:0.3s;
}
.nav ul li a:hover{
    background:#efefef;
    transition:0.3s;
}


/* メインコンテナ */
.main-container{
    width:1000px;
    margin:0 auto;
}


/* メインコンテンツ */
main{
    float:left;
    width:680px;
    margin-right:40px;
}
.list-box{

}
.list-box ul{

}
.list-box ul li{
    margin-bottom:15px;
}
.list-box ul li a{
    display:flex;
    padding:20px;
    background:#fff;
    box-shadow:0 2px 3px #999;
    border-radius:3px;
}
.list-box-left{
    width:200px;
}
.list-box-right{
    width:400px;
    padding-left:20px;
}
.list-box-right h2{
    margin-top:15px;
    margin-bottom:15px;
    font-size:24px;
    color:#69a4db;
    font-weight:bold;
    line-height:2;
}
.list-box-right-text{
    margin-bottom:20px;
    line-height:1.6;
    color:#333;
}
.list-box-meta{
    font-size:14px;
}
.list-box-date{
    margin-right:20px;
    color:#333;
}
.list-box-cat{
    margin-right:20px;
    color:#69a4db;
}
.list-box-tag{
    color:#69a4db;
}

/* ページネーション */
.pagination{
    margin:40px 0 0;
}
.nav-links{
    display:flex;
}
.pagination .page-numbers{
    display:inline-block;
    margin-right:20px;
    padding:20px 25px;
    color:#333;
    border-radius:3px;
    box-shadow:0 3px 3px #999;
    background:#fff;
}
.pagination .current{
    padding:20px 25px;
    background:#69a4db;
    color:#fff;
}
.pagination .prev,
.pagination .next{
    background:transparent;
    box-shadow:none;
    color:#69a4db;
}
.pagination .dots{
    background:transparent;
    box-shadow:none;
}

/* サイドバー */
aside{
    float:left;
    width:280px;
}
.sidebar .widget{
    margin-bottom:30px;
}
.sidebar .widget h2{
    margin-bottom:30px;
    padding-bottom:5px;
    font-size:21px;
    line-height:2;
    border-bottom:2px solid #333;
    color:#333;
}

/* サイドバー２　最新の記事 */
.newpost-box{

}
.newpost-box ul{

}
.newpost-box ul li{
    margin-bottom:10px;
}
.newpost-box ul li a{
    display:flex;
}
.newpost-box-left{
    width:80px;
}
.newpost-box-left img{
    width:100%;
}
.newpost-box-right{
    width:200px;
    padding-top:25px;
    padding-left:20px;
}
.newpost-box-right h3{
    font-weight:bold;
    color:#69a4db;
    font-size:16px;
    line-height:1.8;
}

/* サイドバー3　カテゴリー */
.sidebar-cat{

}
.sidebar-cat ul{
	margin:0 15px;
}
.sidebar-cat ul li{
    padding:20px 0;
    border-bottom:1px dashed #333;
}
.sidebar-cat ul li:first-child{
    padding-top:0;
}
.sidebar-cat ul li a{
    display:block;
    color:#69a4db;
}
.sidebar-cat ul li a .fa-angle-right{
	float:right;
	margin-right:12px;
	font-size:26px;
}

/* サイドバー4　タグ */
.sidebar-tag{

}
.sidebar-tag a{
    display:inline-block;
    margin-right:10px;
    margin-bottom:10px;
    padding:10px;
    border-radius:50px;
    border:1px solid #333;
    font-size:18px;
    color:#69a4db;
}

/* サイドバー5　アーカイブ */
.archive{

}
.archive-2020{
    margin-bottom:15px;
}
.archive-2020 a{
    color:#69a4db;
    font-size:18px;
}
.archive-2020 span{
    display:inline-block;
    margin-bottom:10px;
}
.archive-2020 span img{
    display:inline-block;
    margin-right:10px;
}
.archive-2020 ul{

}
.archive-2020 ul li{
    margin-left:50px;
    line-height:1.7;
}
.archive-2020 ul li a{

}

.archive-2019{

}
.archive-2019 a{
    color:#69a4db;
    font-size:18px;
}
.archive-2019 span{
    display:inline-block;
    margin-bottom:10px;
}
.archive-2019 span img{
    display:inline-block;
    margin-right:10px;
}
.archive-2019 ul{

}
.archive-2019 ul li{
    margin-left:50px;
    line-height:1.6;
}
.archive-2019 ul li a{

}


/* フッター */
footer{
    margin-top:100px;
    background:#313131;
}
.footer{
    display:flex;
    width:1000px;
    margin:0 auto;
    padding-top:70px;
    padding-bottom:70px;
}
.footer-left{
    width:430px;
}
.footer-left h2{
    margin-bottom:50px;
}
.footer-left ul{
    width:300px;
}
.footer-left ul li{
    float:left;
    margin-right:20px;
    margin-bottom:25px;
}
.footer-left ul li a{
    color:#69a4db;
}
.footer-right{
    width:570px;
    float:right;
}

.copyright{
    color:#313131;
    background:#626262;
    padding:25px 0;
}
.copyright p{
    width:1000px;
    margin:0 auto;
    text-align:right;
}

/* facebook twitter API */
.twitter-timeline{
    margin-right:10px;
}


/* 前ページ、次ページのページネーション */
.og-pagination{
	display:flex;
	 margin-top:20px;
    margin-bottom:50px;
    text-align:center;
}
.og-pagination-prev{
		 width:320px;
	   margin-right:20px;
	    padding:12px 0 20px;
    box-sizing:border-box;
	border-bottom:1px solid #333;
}
.og-pagination-prev a{
    color:#333;
}
.og-pagination-next{
		width:320px;
	    padding:12px 0 20px;
    box-sizing:border-box;
	border-bottom:1px solid #333;
}
.og-pagination-next a{
    color:#333;
}



/* サイドバー１　ランキング */
.ranking-box ul li{
    margin-bottom:20px;
}
.ranking-box ul li a{
    display:flex;
}
.ranking-box-left{
    width:50px;
}
.ranking-box-right{
    width:220px;
    padding-left:30px;
}
.ranking-box-right h3{
    margin-bottom:10px;
    color:#69a4db;
    font-size:16px;
}
.ranking-box-right span{
    color:#333;
    font-size:14px;
}
/* 順位カウンタをリセットする記述 */
.ranking-box ul{
	counter-reset: wpp-ranking;
}
/* 順位を表示する記述１ */
.ranking-box ul li{
	position: relative;
}
/* 順位を表示する記述２ */
.ranking-box ul li:before {
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
}
/* 1位 */
.ranking-box ul li:nth-child(1):before{
	content: url('https://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-1.png');
	position:absolute;
	top:0;
	left:0;
}
/* 2位 */
.ranking-box ul li:nth-of-type(2):before{
	content: url('https://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-2.png');
	position:absolute;
	top:0;
	left:0;
}
/* 3位 */
.ranking-box ul li:nth-of-type(3):before{
	content: url('https://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-3.png');
	position:absolute;
	top:0;
	left:0;
}
/* 4位 */
.ranking-box ul li:nth-of-type(4):before{
	content: url('https://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-4.png');
	position:absolute;
	top:0;
	left:0;
}
/* 5位 */
.ranking-box ul li:nth-of-type(5):before{
	content: url('https://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-5.png');
	position:absolute;
	top:0;
	left:0;
}


/* 投稿ページ */
.single-container{
	background:#fff;
	padding:30px 20px;
	box-shadow: 0 0 3px #ddd;
}
.single-top{
    display:flex;
    margin-bottom:20px;
}
.single-top-left{
    width:200px;
}
.single-top-right{
    width:480px;
    padding-left:20px;
}
.single-top-right h1{
    margin-bottom:20px;
    font-size:20px;
    line-height:1.8;
    color:#69a4db;
}
.single-top-right-meta{
    margin-bottom:16px;
	padding:14px;
	background:#f4f4f4;
}
.single-time{
    font-size:14px;
    margin-right:20px;
    color:#999;
}
.single-cat{
    font-size:14px;
    margin-right:10px;
}
.single-cat a{
    color:#666;
	margin-right:10px;
}
.single-tag{
    font-size:14px;
}
.single-tag a{
    color:#666;
}

.single-sns{
    display:flex;
}
.single-sns span{
    margin-top:7px;
}
.single-sns a img{
    width:30px;
    margin-right:7px;
}

/* 投稿ページ　本文 */
.single-box-post{
    margin-bottom:20px;
    line-height:1.8;
	font-size:15px;
	color:#555;
}
/* 前後のページネーション　投稿ページ、固定ページ */
.post__pagination{
    margin-bottom:50px;
    overflow:hidden;
}
.post__pagination__left,
.post__pagination__right{
    width:310px;
}
.post__pagination__left{
    float:left;
}
.post__pagination__right{
    float:right;
}
.post__pagination__left > a,
.post__pagination__right > a{
    display:block;
    position:relative;
}
.post__pagination__left__img,
.post__pagination__right__img{
    display:block;
    background:#000;
}
.post__pagination__left__img > img,
.post__pagination__right__img > img{
    width:100%;
    height:100px;
    object-fit:cover;
    opacity:0.3;
}
.post__pagination__left__text,
.post__pagination__right__text{
    position: absolute;
    top: 44px;
    z-index: 999:;
    color: #fff;
    font-size:14px;
}
.post__pagination__left__text{
    left:50px;
}
.post__pagination__right__text{
    right: 50px;
}

/* 関連記事一覧 */
.related{
    margin:26px 0;
}
.related--title{
    font-size: 18px;
    margin-top: 50px;
    margin-bottom: 20px;
}
.related-post{

}
.related-post__items{
    margin-bottom:20px;
}
.related-post__items--link{
    display:flex;
}
.related-post__items--left{
    width:100px;
}
.related-post__items--right{
    width:580px;
    padding-top:4px;
    padding-left:10px;
}
.related-post__items--title{
    color: #333;
    margin-bottom: 10px;
}
.related-post__items--description{
    font-size: 13px;
    color: #777;
    line-height:1.5;
}


/* 執筆者のプロフィール */
.related-h3{
    font-size:18px;
    margin-top:50px;
    margin-bottom:20px;
}
.related-box{
    display:flex;
    padding:15px;
    background:#fff;
    box-shadow:0 0 3px #ddd;
}
.related-box__left{
    width:80px;
}
.related-box__right{
    width:600px;
    padding-left:15px;
}
.related-box__right > h4{
    font-size:18px;
    margin-bottom:10px;
}
.related-box__right > p{
    line-height:1.5;
    font-size:15px;
}


/* パンくずリスト */
.breadcrumbs{
    width:1000px;
    margin:0 auto 30px;
}
/* 矢印の装飾 */
.pankuzu_arrow{
    display:inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10.4px;
    border-color: transparent transparent transparent #69A4DB;
}
/* 要素間の幅 */
.breadcrumbs > span{
    margin-right:12px;
    font-size:13px;
}
/* 文字色 */
.breadcrumbs > span > a{
    color:#333;
}
/* ホームのみの文字色 */
.breadcrumbs .home{
    color:#69A4DB;
}
    
/* 文字数を省略 */
.breadcrumbs span[property="name"] {
    display: inline-block;
    padding: 0;
    margin-top: -3px;
    vertical-align: middle;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 固定ページ */
.page-container__box{
    padding:30px 20px;
    background:#fff;
}
.page-container__box__title{
    font-size: 24px;
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 2px solid #333;
}
.page-container__box > p{
    line-height:1.5;
    color:#555;
}


/* 検索結果一覧のコンテンツ */
.search-list{
    float:left;
    height:132px;
}
.search-list a{
    display:flex;
    width:320px;
    margin-right:20px;
    margin-bottom:20px;
    padding:10px;
    box-sizing:border-box;
    background:#fff;
    box-shadow: 0 0 3px #ddd;
}
.search-list:nth-child(even){
    margin-right:0;
}
.search-list-l{
    width:100px;
}
.search-list-r{
    width:220px;
    padding-left:10px;
}
.search-list-r h2{
    font-size:16px;
    line-height:1.3;
    margin-bottom:10px;
    color:#69a4db;
}
.search-list-r p{
    font-size:13px;
    line-height:1.5;
    color:#333;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

@charset "utf-8";

body {

font-family: "Noto Sans Japanese", sans-serif;

background:#f4f4f4;

}

img{

max-width:100%;

height:auto;

vertical-align:middle;

}

/* ヘッダー */

header{

background:#fff;

}

.header{

width:1000px;

margin:0 auto;

padding:40px 0;

display:flex;

}

.header-left{

width:500px;

}

.header-left a img{

width:330px;

}

.header-right{

display:flex;

justify-content:space-between;

width:500px;

}

.header-right-l{

}

.header-right-l-form{

display:flex;

width:230px;

height:40px;

margin-top:20px;

background:#eee;

border-radius:20px;

margin-right:30px;

}

.header-right-l-form input[type="text"]{

width:190px;

height:40px;

padding-left:20px;

border:none;

background:#eee;

border-radius:20px 0 0 20px;

outline:none;

}

.header-right-l-form button[type="submit"]{

width:40px;

height:42px;

padding-right:10px;

border:none;

background:#555;

border-radius:0 20px 20px 0;

outline:none;

cursor:pointer;

}

.header-right-l-form button[type="submit"] .fa-search{

color:#fff;

font-size:18px;

}

.header-right-r{

}

.header-right-r a{

display:block;

width:240px;

background:#69a4db;

color:#fff;

font-weight:bold;

padding:30px 0;

border-radius:12px;

text-align:center;

}

/* グローバルナビゲーション */

.nav{

margin-bottom:70px;

background:#e5e5e5;

box-shadow:0 3px 3px #999;

}

.nav ul{

display:flex;

width:1000px;

margin:0 auto;

}

.nav ul li{

width:200px;

text-align:center;

border-left:1px solid #bfbfbf;

}

.nav ul li:last-child{

border-right:1px solid #bfbfbf;

}

.nav ul li a{

display:block;

padding:30px 0;

background:#e5e5e5;

color:#69a4db;

font-weight:bold;

transition:0.3s;

}

.nav ul li a:hover{

background:#efefef;

transition:0.3s;

}

/* メインコンテナ */

.main-container{

width:1000px;

margin:0 auto;

}

/* メインコンテンツ */

main{

float:left;

width:680px;

margin-right:40px;

}

.list-box{

}

.list-box ul{

}

.list-box ul li{

margin-bottom:15px;

}

.list-box ul li a{

display:flex;

padding:20px;

background:#fff;

box-shadow:0 2px 3px #999;

border-radius:3px;

}

.list-box-left{

width:200px;

}

.list-box-right{

width:400px;

padding-left:20px;

}

.list-box-right h2{

margin-top:15px;

margin-bottom:15px;

font-size:24px;

color:#69a4db;

font-weight:bold;

line-height:2;

}

.list-box-right-text{

margin-bottom:20px;

line-height:1.6;

color:#333;

}

.list-box-meta{

font-size:14px;

}

.list-box-date{

margin-right:20px;

color:#333;

}

.list-box-cat{

margin-right:20px;

color:#69a4db;

}

.list-box-tag{

color:#69a4db;

}

/* ページネーション */

.pagination{

margin:40px 0 0;

}

.nav-links{

display:flex;

}

.pagination .page-numbers{

display:inline-block;

margin-right:20px;

padding:20px 25px;

color:#333;

border-radius:3px;

box-shadow:0 3px 3px #999;

background:#fff;

}

.pagination .current{

padding:20px 25px;

background:#69a4db;

color:#fff;

}

.pagination .prev,

.pagination .next{

background:transparent;

box-shadow:none;

color:#69a4db;

}

.pagination .dots{

background:transparent;

box-shadow:none;

}

/* サイドバー */

aside{

float:left;

width:280px;

}

.sidebar .widget{

margin-bottom:30px;

}

.sidebar .widget h2{

margin-bottom:30px;

padding-bottom:5px;

font-size:21px;

line-height:2;

border-bottom:2px solid #333;

color:#333;

}

/* サイドバー２　最新の記事 */

.newpost-box{

}

.newpost-box ul{

}

.newpost-box ul li{

margin-bottom:10px;

}

.newpost-box ul li a{

display:flex;

}

.newpost-box-left{

width:80px;

}

.newpost-box-left img{

width:100%;

}

.newpost-box-right{

width:200px;

padding-top:25px;

padding-left:20px;

}

.newpost-box-right h3{

font-weight:bold;

color:#69a4db;

font-size:16px;

line-height:1.8;

}

/* サイドバー3　カテゴリー */

.sidebar-cat{

}

.sidebar-cat ul{

margin:0 15px;

}

.sidebar-cat ul li{

padding:20px 0;

border-bottom:1px dashed #333;

}

.sidebar-cat ul li:first-child{

padding-top:0;

}

.sidebar-cat ul li a{

display:block;

color:#69a4db;

}

.sidebar-cat ul li a .fa-angle-right{

float:right;

margin-right:12px;

font-size:26px;

}

/* サイドバー4　タグ */

.sidebar-tag{

}

.sidebar-tag a{

display:inline-block;

margin-right:10px;

margin-bottom:10px;

padding:10px;

border-radius:50px;

border:1px solid #333;

font-size:18px;

color:#69a4db;

}

/* サイドバー5　アーカイブ */

.archive{

}

.archive-2020{

margin-bottom:15px;

}

.archive-2020 a{

color:#69a4db;

font-size:18px;

}

.archive-2020 span{

display:inline-block;

margin-bottom:10px;

}

.archive-2020 span img{

display:inline-block;

margin-right:10px;

}

.archive-2020 ul{

}

.archive-2020 ul li{

margin-left:50px;

line-height:1.7;

}

.archive-2020 ul li a{

}

.archive-2019{

}

.archive-2019 a{

color:#69a4db;

font-size:18px;

}

.archive-2019 span{

display:inline-block;

margin-bottom:10px;

}

.archive-2019 span img{

display:inline-block;

margin-right:10px;

}

.archive-2019 ul{

}

.archive-2019 ul li{

margin-left:50px;

line-height:1.6;

}

.archive-2019 ul li a{

}

/* フッター */

footer{

margin-top:100px;

background:#313131;

}

.footer{

display:flex;

width:1000px;

margin:0 auto;

padding-top:70px;

padding-bottom:70px;

}

.footer-left{

width:430px;

}

.footer-left h2{

margin-bottom:50px;

}

.footer-left ul{

width:300px;

}

.footer-left ul li{

float:left;

margin-right:20px;

margin-bottom:25px;

}

.footer-left ul li a{

color:#69a4db;

}

.footer-right{

width:570px;

float:right;

}

.copyright{

color:#313131;

background:#626262;

padding:25px 0;

}

.copyright p{

width:1000px;

margin:0 auto;

text-align:right;

}

/* facebook twitter API */

.twitter-timeline{

margin-right:10px;

}

/* 前ページ、次ページのページネーション */

.og-pagination{

display:flex;

margin-top:20px;

margin-bottom:50px;

text-align:center;

}

.og-pagination-prev{

width:320px;

margin-right:20px;

padding:12px 0 20px;

box-sizing:border-box;

border-bottom:1px solid #333;

}

.og-pagination-prev a{

color:#333;

}

.og-pagination-next{

width:320px;

padding:12px 0 20px;

box-sizing:border-box;

border-bottom:1px solid #333;

}

.og-pagination-next a{

color:#333;

}

/* サイドバー１　ランキング */

.ranking-box ul li{

margin-bottom:20px;

}

.ranking-box ul li a{

display:flex;

}

.ranking-box-left{

width:50px;

}

.ranking-box-right{

width:220px;

padding-left:30px;

}

.ranking-box-right h3{

margin-bottom:10px;

color:#69a4db;

font-size:16px;

}

.ranking-box-right span{

color:#333;

font-size:14px;

}

/* 順位カウンタをリセットする記述 */

.ranking-box ul{

counter-reset: wpp-ranking;

}

/* 順位を表示する記述１ */

.ranking-box ul li{

position: relative;

}

/* 順位を表示する記述２ */

.ranking-box ul li:before {

content: counter(wpp-ranking, decimal);

counter-increment: wpp-ranking;

}

/* 1位 */

.ranking-box ul li:nth-child(1):before{

content: url('http://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-1.png');

position:absolute;

top:0;

left:0;

}

/* 2位 */

.ranking-box ul li:nth-of-type(2):before{

content: url('http://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-2.png');

position:absolute;

top:0;

left:0;

}

/* 3位 */

.ranking-box ul li:nth-of-type(3):before{

content: url('http://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-3.png');

position:absolute;

top:0;

left:0;

}

/* 4位 */

.ranking-box ul li:nth-of-type(4):before{

content: url('http://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-4.png');

position:absolute;

top:0;

left:0;

}

/* 5位 */

.ranking-box ul li:nth-of-type(5):before{

content: url('http://dev-selrea.com/sampleblog/wp-content/uploads/2020/02/sample-ranking-5.png');

position:absolute;

top:0;

left:0;

}

/* 投稿ページ */

.single-container{

background:#fff;

padding:30px 20px;

box-shadow: 0 0 3px #ddd;

}

.single-top{

display:flex;

margin-bottom:20px;

}

.single-top-left{

width:200px;

}

.single-top-right{

width:480px;

padding-left:20px;

}

.single-top-right h1{

margin-bottom:20px;

font-size:20px;

line-height:1.8;

color:#69a4db;

}

.single-top-right-meta{

margin-bottom:16px;

padding:14px;

background:#f4f4f4;

}

.single-time{

font-size:14px;

margin-right:20px;

color:#999;

}

.single-cat{

font-size:14px;

margin-right:10px;

}

.single-cat a{

color:#666;

margin-right:10px;

}

.single-tag{

font-size:14px;

}

.single-tag a{

color:#666;

}

.single-sns{

display:flex;

}

.single-sns span{

margin-top:7px;

}

.single-sns a img{

width:30px;

margin-right:7px;

}

/* 投稿ページ　本文 */

.single-box-post{

margin-bottom:20px;

line-height:1.8;

font-size:15px;

color:#555;

}

/* 前後のページネーション　投稿ページ、固定ページ */

.post__pagination{

margin-bottom:50px;

overflow:hidden;

}

.post__pagination__left,

.post__pagination__right{

width:310px;

}

.post__pagination__left{

float:left;

}

.post__pagination__right{

float:right;

}

.post__pagination__left > a,

.post__pagination__right > a{

display:block;

position:relative;

}

.post__pagination__left__img,

.post__pagination__right__img{

display:block;

background:#000;

}

.post__pagination__left__img > img,

.post__pagination__right__img > img{

width:100%;

height:100px;

object-fit:cover;

opacity:0.3;

}

.post__pagination__left__text,

.post__pagination__right__text{

position: absolute;

top: 44px;

z-index: 999:;

color: #fff;

font-size:14px;

}

.post__pagination__left__text{

left:50px;

}

.post__pagination__right__text{

right: 50px;

}

/* 関連記事一覧 */

.related{

margin:26px 0;

}

.related--title{

font-size: 18px;

margin-top: 50px;

margin-bottom: 20px;

}

.related-post{

}

.related-post__items{

margin-bottom:20px;

}

.related-post__items--link{

display:flex;

}

.related-post__items--left{

width:100px;

}

.related-post__items--right{

width:580px;

padding-top:4px;

padding-left:10px;

}

.related-post__items--title{

color: #333;

margin-bottom: 10px;

}

.related-post__items--description{

font-size: 13px;

color: #777;

line-height:1.5;

}

/* 執筆者のプロフィール */

.related-h3{

font-size:18px;

margin-top:50px;

margin-bottom:20px;

}

.related-box{

display:flex;

padding:15px;

background:#fff;

box-shadow:0 0 3px #ddd;

}

.related-box__left{

width:80px;

}

.related-box__right{

width:600px;

padding-left:15px;

}

.related-box__right > h4{

font-size:18px;

margin-bottom:10px;

}

.related-box__right > p{

line-height:1.5;

font-size:15px;

}

/* パンくずリスト */

.breadcrumbs{

width:1000px;

margin:0 auto 30px;

}

/* 矢印の装飾 */

.pankuzu_arrow{

display:inline-block;

width: 0;

height: 0;

border-style: solid;

border-width: 6px 0 6px 10.4px;

border-color: transparent transparent transparent #69A4DB;

}

/* 要素間の幅 */

.breadcrumbs > span{

margin-right:12px;

font-size:13px;

}

/* 文字色 */

.breadcrumbs > span > a{

color:#333;

}

/* ホームのみの文字色 */

.breadcrumbs .home{

color:#69A4DB;

}

/* 文字数を省略 */

.breadcrumbs span[property="name"] {

display: inline-block;

padding: 0;

margin-top: -3px;

vertical-align: middle;

max-width: 110px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/* 固定ページ */

.page-container__box{

padding:30px 20px;

background:#fff;

}

.page-container__box__title{

font-size: 24px;

margin-bottom: 50px;

padding-bottom: 20px;

border-bottom: 2px solid #333;

}

.page-container__box > p{

line-height:1.5;

color:#555;

}

/* 検索結果一覧のコンテンツ */

.search-list{

float:left;

height:132px;

}

.search-list a{

display:flex;

width:320px;

margin-right:20px;

margin-bottom:20px;

padding:10px;

box-sizing:border-box;

background:#fff;

box-shadow: 0 0 3px #ddd;

}

.search-list:nth-child(even){

margin-right:0;

}

.search-list-l{

width:100px;

}

.search-list-r{

width:220px;

padding-left:10px;

}

.search-list-r h2{

font-size:16px;

line-height:1.3;

margin-bottom:10px;

color:#69a4db;

}

.search-list-r p{

font-size:13px;

line-height:1.5;

color:#333;

}

HTMLをテンプレート化する

次に、作成したHTMLをテンプレート化します。

HTMLをテンプレート化するとは

テンプレート化するとは下記の２ステップを行うことをいいます。

ステップ①HTMLの拡張子を「.html」から「.php」に変換するステップ②自動化すべきHTMLの箇所をPHPの記述に書き直す

それぞれ順番に解説します。

index.phpを作成する

作成したHTMLの拡張子を「.html」から「.php」に変換しましょう。
ここではただそれだけです。
自動化すべき部分は後ほどでPHPで書き換えます。

テーマに必ず必要なstyle.cssを作成する

style.cssを作成

次に先ほど作成したsample.cssとは別にstyle.cssを作成します。
style.cssには先頭にテーマの名前や説明、バージョンなどの情報を記載します。

/*
Theme Name: SAMPLG BLOG
Theme URL: 
Description: DIGITORのテーマ作成の記事で扱うサンプルテーマです。
Author: 株式会社セルリア　高澤翔汰
Version: 1.0
Tags: 
License: 
License URI: 
*/

Theme Name: SAMPLG BLOG

Theme URL:

Description: DIGITORのテーマ作成の記事で扱うサンプルテーマです。

Author: 株式会社セルリア　高澤翔汰

Version: 1.0

Tags:

License:

License URI:

style.cssを作成する理由は、style.cssは自作したテンプレートファイルがテーマであることをWordPressに認識させるためのCSSファイルだからです。
なので、style.cssの読み込みのlinkタグをheadタグ内に記述する必要はありませんし、逆にデザインのためのCSSを記述してheadタグ内で読み込ませてもどちらでも可能です。
下記の図のようなファイル構成でstyle.cssを追加しましょう。

MAMPもしくはXAMPPのhtdocsにWordPress本体ファイルをアップする

MAMPもしくはXAMPPの「htdocs」ファイルの階層にWordPress公式サイトからインストールしたWordPress本体ファイルを配置します。
そのあと下記の手順でテーマをサイトに反映させます。
１、WordPressの初期設定（セットアップ）を完了させる ２、「wp-content/themes/」の階層の中にここまでで作った「sampleblog」テーマファイルを配置させる。 ３、WordPress管理画面左メニューの「外観」→「テーマ」で有効化します。
テーマの有効化に関しては次のコンテンツで解説します。
「WordPressをMAMPもしくはXAMPPで立ち上げる方法がよくわからない…」という方は下記の記事でご紹介しておりますので、よろしければご覧ください。

WordPressでテーマを有効化

テーマを有効化とは、インストールされているいくつかのテーマのどれかを選択してサイトの見た目として機能させるということです。
その前に、現時点ではそもそもサーバーにテーマとしてのファイルが存在しないので、有効化することができません。
なので、まずはここまでで作成した下記2つのファイルをアップロードします。

【テーマとして成り立たせる最低限必要なファイル】・index.php ・style.css

アップする場所は下記の階層になります。アップする場所：wp-content/themes/sampleblog/の階層
アップロードが完了したら、 WordPress管理画面の左のメニューから「外観」→「テーマ」をクリックします。そしたらテーマの管理画面の一覧に「有効化」ボタンがあるのでクリックします。サイトを表示したら自作したテーマが反映されているのが確認できるかと思います。

テンプレートを分割する

あとは、index.phpのプログラムを各部品（ヘッダー、フッター、サイドバー）ごとに分割します。

ヘッダーのテンプレートを作成

↓これがheader.phpの完成イメージです。

wp-content/themes/sampleblog/の階層に、header.phpを作成しましょう。
index.phpにある下記のコードをheader.phpへコピペしましょう。
そのあとコピペした分のソースコードは削除します。
↓header.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SAMPLE BLOG</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/sample.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>
 
    <div class="container">
        <header>
            <div class="header">
                <div class="header-left">
                    <a href="#"><img src="./image/sample-logo.png" alt=""></a>
                </div>
                <div class="header-right">
                    <div class="header-right-l">
                        <form class="header-right-l-form" action="./index.html" method="get">
                            <input type="text" placeholder="キーワード検索" value="">
                            <button type="submit" value=""><i class="fas fa-search"></i></button>
                        </form>
                    </div>
                    <div class="header-right-r">
                        <a href="#">お問い合わせはこちら</a>
                    </div>
                </div>
            </div>
        </header>
        <nav>
            <div class="nav">
                <ul>
                    <li><a href="#">メニュー1</a></li>
                    <li><a href="#">メニュー2</a></li>
                    <li><a href="#">メニュー3</a></li>
                    <li><a href="#">メニュー4</a></li>
                    <li><a href="#">メニュー5</a></li>
                </ul>
            </div>
        </nav>

<!doctype html>

<html>

<head>

<title>SAMPLE BLOG</title>

</head>

<body>

</div>

</form>

</div>

<a href="#">お問い合わせはこちら</a>

</div>

</header>

<nav>

<ul>

</ul>

</div>

</nav>

そしてindex.phpには今ざっくり消した部分（header.phpに移動させた部分）をget_header()関数に書きかえましょう。
↓index.phpのヘッダーの抜き出しもとの場所

<?php
// 抜き出した場所を下記のget_header()関数に書き換える
get_header();
?>

<?php

// 抜き出した場所を下記のget_header()関数に書き換える

get_header();

作成するテンプレートファイルの場所：wp-content/themes/sampleblog/の階層
するとindex.phpのヘッダー部分の記述がすっきりして、ヘッダーのレイアウトとそれ以外のコンテンツが分割されました。
この調子で他のフッターやサイドバーなども分割しましょう。

フッターのテンプレートを作成

↓こちらが完成イメージです。

footer.phpを作成しましょう。
下記のコードをindex.phpから切り離してfooter.phpへコピペしましょう。
↓footer.php

       <footer>
            <div class="footer">
                <div class="footer-left">
                    <h2><a href="#"><img src="./image/sample-footer-logo.png"></a></h2>
                    <ul class="cf">
                        <li><a href="#">メニュー①</a></li>
                        <li><a href="#">メニュー②</a></li>
                        <li><a href="#">メニュー③</a></li>
                        <li><a href="#">メニュー④</a></li>
                        <li><a href="#">メニュー⑤</a></li>
                    </ul>
                </div>
                <div class="footer-right">
                    <a class="twitter-timeline" width="240" height="270" href="https://twitter.com/minweb_selrea?ref_src=twsrc%5Etfw">Tweets by minweb_selrea</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    <div class="fb-page" data-href="https://m.facebook.com/minwebcom/" data-tabs="timeline" data-width="315" data-height="270" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://m.facebook.com/minwebcom/" class="fb-xfbml-parse-ignore"><a href="https://m.facebook.com/minwebcom/">DIGITOR -みんな使えるWeb活用術</a></blockquote></div>
                </div>
            </div>
            <div class="copyright">
                <p>Powered by minweb.com template Selrea,Inc</p>
            </div>
        </footer>
    </div>
</body>
</html>

</ul>

</div>

</div>

<p>Powered by minweb.com template Selrea,Inc</p>

</div>

</footer>

</div>

</body>

</html>

そしてindex.phpにはざっくり消した部分（footer.phpに移動させた部分）をget_footer()関数に書きかえましょう。
↓index.phpのフッターの抜きだしもとの場所

<?php
// 抜き出した場所を下記のget_footer()関数に書き換える
get_footer();
?>

<?php

// 抜き出した場所を下記のget_footer()関数に書き換える

get_footer();

作成するテンプレートファイルの場所：wp-content/themes/sampleblog/の階層

サイドバーのテンプレートを作成

↓こちらが完成のイメージです。

sidebar.phpを作成しましょう。
下記のコードをindex.phpから切り離してsidebar.phpへコピペしましょう。
↓sidebar.php

クリックでsidebar.phpのソースコードを展開する

            <aside>
                <div class="sidebar">
                    <div class="widget">
                        <h2>人気記事ランキング</h2>
                        <div class="ranking-box">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-1.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-2.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-3.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-4.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="ranking-box-left">
                                            <img src="./image/sample-ranking-5.png">
                                        </div>
                                        <div class="ranking-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                            <span>873view</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="widget">
                        <h2>最新の記事一覧</h2>
                        <div class="newpost-box">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-1.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-2.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-3.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-1.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="newpost-box-left">
                                            <img src="./image/sample-list-img-2.png" alt="">
                                        </div>
                                        <div class="newpost-box-right">
                                            <h3>ブログ記事タイトル(7)</h3>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="widget">
                        <h2>タグ</h2>
                        <div class="sidebar-tag">
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                            <a href="#">タグ①</a>
                        </div>
                    </div>

                    <div class="widget">
                        <h2>アーカイブ</h2>
                        <div class="archive">
                            <div class="archive-2020">
                                <span><img src="./image/sample-arrow.png"><a href="#">2020(5)</a></span>
                                <ul>
                                    <li><a href="#">2020/3(1)</a></li>
                                    <li><a href="#">2020/2(2)</a></li>
                                    <li><a href="#">2020/1(2)</a></li>
                                </ul>
                            </div>
                            <div class="archive-2019">
                                <span><img src="./image/sample-arrow.png"><a href="#">2019(7)</a></span>
                                <ul>
                                    <li><a href="#">2019/12(5)</a></li>
                                    <li><a href="#">2019/11(2)</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

<aside>

<h2>人気記事ランキング</h2>

<ul>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

</ul>

</div>

<h2>最新の記事一覧</h2>

<ul>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

<li>

</div>

<h3>ブログ記事タイトル(7)</h3>

</div>

</a>

</li>

</ul>

</div>

</div>

<h2>アーカイブ</h2>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</aside>

そしてindex.phpにはざっくり消した部分（sidebar.phpに移動させた部分）をget_sidebar()関数に書きかえましょう。
↓index.phpのサイドバーの抜き出しもとの場所

<?php
// 抜き出した場所を下記のget_sidebar()関数に書き換える
get_sidebar();
?>

<?php

// 抜き出した場所を下記のget_sidebar()関数に書き換える

get_sidebar();

作成するテンプレートファイルの場所：wp-content/themes/sampleblog/の階層

functions.phpを作成する

functions.phpはWordPressのテーマ作成には欠かせないテンプレートです。
後々使うことになるので、事前にfunctions.phpを作成しておきましょう。
作成するテンプレートファイルの場所：wp-content/themes/sampleblog/の階層

functions.phpとは

そもそもfunctions.phpとはなんだ？と疑問に思われている方も多くいらっしゃるのではないでしょうか。
functions.phpとは、WordPress内での様々な機能を実装するプログラムを書く場所です。
しばしば実装される機能としては、アイキャッチの機能やメニューを設定する機能、また、「アクションフック」や「フィルターフック」といったフックというプログラムを利用してWordPressを高度にカスタマイズすることができます。
ここまでで、以下のファイル構成になります。
進捗のご確認としてご活用ください。

「functions.phpについて詳しく知りたい！」という方は下記の記事でご確認いただければと思います。

テンプレートに機能を導入する

ここでテンプレートファイルの自動化すべき部分をPHPで書き直していきます。
現状まだ静的なHTMLのコードのみとなっているはずなので、修正していきましょう。
（※作業を行う前に予めデータベースに記事データなどがあった方が機能導入後にサイト上の動きが確認しやすいので、予め記事を投稿するなどしておきましょう。）
（※下記のAll in One Migrationプラグインのデータをインポートすると、サイト内に記事データを反映することができます。その際はAll in One Migrationプラグインをインストールしてください。→インストール方法はこちら）

テンプレートタグとは

テンプレートタグ（WordPress関数）とは、WordPressの専用の関数です。
WordPressのテーマ作成やプラグインを作成する時に主に使用されます。
短いコードで高度な機能を簡単に実装できるので、テンプレートタグを使うことによってハイクオリティなテーマが作成できます。
逆にいうと、テンプレートタグがわからないとテーマ作成することができないともいえます。
ただ、決して難しいことではなく簡単に実装することができるのでご安心ください。
それでは下記で各部品のHTMLをPHPに書きかえます。

ヘッダーロゴの実装

まずはheader.phpにあるヘッダーロゴを自動化します。自動化する部分は「リンク」と「画像読み込みのURL」です。

使用するテンプレートタグは以下の3つです。 esc_url()　URLを無害化する home_url()　サイトのURLを返す get_template_directory_uri()　テーマのディレクトリのURLを取得する

それでは下記のようにコードを修正しましょう。（Before）

<div class="header-left">
    <a href="#"><img src="./image/sample-logo.png" alt=""></a>
</div>

</div>

（After）

<div class="header-left">
    <a href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php echo get_template_directory_uri(); ?>/image/sample-logo.png" alt=""></a>
</div>

<a href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php echo get_template_directory_uri(); ?>/image/sample-logo.png" alt=""></a>

</div>

見た目は変わりませんが、ロゴ画像をクリックするとトップページにリンクされているかと思います。

アイキャッチ画像表示機能の実装

そもそもアイキャッチ機能はデフォルト状態では機能しておらず使用できません。なのでアイキャッチ画像を投稿画面で設定してサイトに表示させるには下記の手順が必要になります。ステップ①functions.phpにadd_theme_support(‘post-thumbnails’’)を記述するステップ②記事編集画面にアイキャッチ画像の設定枠が追加されるので、そこでアイキャッチを設定するステップ③テンプレートファイルにthe_post_thumbnail()関数を記述する

ここでは、まずアイキャッチ画像の機能を有効化しましょう。下記コードをfunctions.phpに記述します。

<?php
// アイキャッチ画像の設定
add_theme_support('post-thumbnails');
?>

<?php

// アイキャッチ画像の設定

add_theme_support('post-thumbnails');

これでアイキャッチ画像を設定できるようになりました。実装した結果、管理画面の投稿画面でアイキャッチ画像を設定でき、またWordPress関数でアイキャッチ画像を読み込み表示させることができるようになりました。実際に投稿画面で設定することができるようになりました。

ヘッダーとフッターのメニューを自動化する

CMSであるWordPressの良いところは、サイト上にあるコンテンツを管理画面から設定・入力して反映させるなど更新や修正を自動化することができるところです。
メニューに限らず必要に応じてサイトのコンテンツを自動化することによって、HTMLの知識がないクライアントのためにサイト制作ができるなど多くのメリットがあります。
まずは下記のようにheader.phpとfooter.phpのコードを修正して実装していきましょう。
（修正前：header.phpの場合）

<div class="nav">
    <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
        <li><a href="#">メニュー5</a></li>
    </ul>
</div>

<ul>

</ul>

</div>

（修正後：header.phpの場合）

<div class="nav">
    <?php
    wp_nav_menu(array(
        'theme_location' => 'header-navi',
        'container' => false,
    ));
    ?>
</div>

<?php

wp_nav_menu(array(

'theme_location' => 'header-navi',

'container' => false,

));

</div>

（修正前：footer.phpの場合）

<ul class="cf">
    <li><a href="#">メニュー①</a></li>
    <li><a href="#">メニュー②</a></li>
    <li><a href="#">メニュー③</a></li>
    <li><a href="#">メニュー④</a></li>
    <li><a href="#">メニュー⑤</a></li>
</ul>

</ul>

（修正後：footer.phpの場合）

<?php
wp_nav_menu(array(
    'theme_location' => 'footer-navi',
    'container' => false,
));
?>

<?php

wp_nav_menu(array(

'theme_location' => 'footer-navi',

'container' => false,

));

そしたら次にfunctions.phpに下記のようにコードを追加しましょう。

<?php
// ヘッダーナビゲーション用
register_nav_menu('header-navi','ヘッダーナビゲーション');
// フッターナビゲーション用
register_nav_menu('footer-navi','フッターのナビゲーション');
?>

<?php

// ヘッダーナビゲーション用

register_nav_menu('header-navi','ヘッダーナビゲーション');

// フッターナビゲーション用

register_nav_menu('footer-navi','フッターのナビゲーション');

これで管理画面の左メニューにある「外観」→「メニュー」に移動してメニュー編集画面で設定していただけるとサイトのグローバルナビゲーションとフッターナビゲーションの両方を更新することができます。
HTMLの知識がなくてもカスタマイズできるようになりました。

サイドバーのカテゴリーを自動化する

カテゴリーの機能はデフォルトで備わっていますが、テンプレートタグを使用しなければサイトに表示されません。
下記のようにsidebar.phpのコードを修正しましょう。（Before）

<div class="widget">
    <h2>カテゴリー</h2>
    <div class="sidebar-cat">
        <ul>
            <li><a href="#">カテゴリー<i class="fas fa-angle-right"></i></a></li>
            <li><a href="#">未分類<i class="fas fa-angle-right"></i></a></li>
        </ul>
    </div>
</div>

<h2>カテゴリー</h2>

<ul>

<li><a href="#">カテゴリー<i class="fas fa-angle-right"></i></a></li>

</ul>

</div>

（After）

<div class="widget">
    <h2>カテゴリー</h2>
    <div class="sidebar-cat">
        <ul>
            <?php
            $categories = get_categories();
            foreach($categories as $category):
            ?>
                <li><a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?><i class="fas fa-angle-right"></i></a></li>
            <?php
            endforeach;
            ?>
        </ul>
    </div>
</div>

<h2>カテゴリー</h2>

<ul>

<?php

$categories = get_categories();

foreach($categories as $category):

<?php

endforeach;

</ul>

</div>

サイドバーのカテゴリー一覧が設定した項目通りに表示されていることと思います。これで自動化されたので、後からカテゴリーの項目を増やした時に追加されることになります。

サイドバーのタグを自動化する

次に、サイドバーにタグの一覧も自動化して表示させましょう。下記のようにsidebar.phpのコードを修正しましょう。（Before）

<div class="widget">
    <h2>タグ</h2>
    <div class="sidebar-tag">
        <a href="#">タグ①</a>
        <a href="#">タグ①</a>
        <a href="#">タグ①</a>
        <a href="#">タグ①</a>
        <a href="#">タグ①</a>
        <a href="#">タグ①</a>
    </div>
</div>

</div>

（After）

<div class="widget">
    <h2>タグ</h2>
    <div class="sidebar-tag">
    <?php
    $args = array(
        'smallest' => 18,
        'largest' => 18,
        'unit' => 'px',
    );
    wp_tag_cloud($args);
    ?>
    </div>
</div>

<?php

$args = array(

'smallest' => 18,

'largest' => 18,

'unit' => 'px',

);

wp_tag_cloud($args);

</div>

サイドバーのタグ一覧が設定した項目通りに表示されていることと思います。

記事一覧機能の実装

記事一覧表示の実装はWordPressでのサイト制作ではかなり重要です。一覧機能はWordPressループというプログラムを書いて実装します。
WordPressループには「メインループ」と「サブループ」の2種類がありますが、ここでは「メインループ」を使います。
使用するテンプレートタグは以下の2つです。

have_posts()　ループできる投稿データがあるかどうかをチェックする the_post()　ループの処理を次に進める

それでは下記のようにindex.phpのコードを修正しましょう。
（Before）

クリックでindex.phpのソースコードを展開する

            <main>
                <div class="list-box">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(12)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-2.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(11)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-3.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(10)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(9)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-2.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(8)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-3.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(7)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(6)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-2.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(5)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-3.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(4)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="list-box-left">
                                    <img src="./image/sample-list-img-1.png" alt="">
                                </div>
                                <div class="list-box-right">
                                    <h2>ブログ記事タイトル(3)</h2>
                                    <p class="list-box-right-text">
                                        記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                                    </p>
                                    <div class="list-box-meta">
                                        <span class="list-box-date">2019.12.12</span>
                                        <span class="list-box-cat">カテゴリー</span>
                                        <span class="list-box-tag">タグ①,タグ②,タグ③</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="pagenation">
                    <ul class="cf">
                        <li class="active">1</li>
                        <li><a href="#">2</a></li>
                        <li class="next"><a href="#">次へ &gt;&gt;</a></li>
                    </ul>
                </div>
            </main>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

<main>

<ul>

<li>

</div>

<h2>ブログ記事タイトル(12)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(11)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(10)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(9)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(8)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(7)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(6)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(5)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(4)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

<li>

</div>

<h2>ブログ記事タイトル(3)</h2>

記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</p>

<span class="list-box-cat">カテゴリー</span>

</div>

</a>

</li>

</ul>

</div>

運営：株式会社セルリア

テーマを自作！オリジナルのWordPressテーマを制作する手順【徹底解説】

自作する前にWordPressの基本のおさらい

WordPressとは

WordPressのテーマ作成とは

テーマ作成をするメリット

WordPress本体ファイルを公式サイトからダウンロードする

WordPress本体ファイルのダウンロードのやり方

WordPressのファイル構成と独自のテンプレート一覧

WordPressのテンプレート階層とは

WordPressを動かすために必須のサーバー環境構築方法

ローカルサーバーの種類

ローカルサーバーの使う場面

テーマ作成の流れ

まずはHTMLでコーディングする

HTMLとCSSを作成

HTMLをテンプレート化する

HTMLをテンプレート化するとは

index.phpを作成する

テーマに必ず必要なstyle.cssを作成する

style.cssを作成

MAMPもしくはXAMPPのhtdocsにWordPress本体ファイルをアップする

WordPressでテーマを有効化

テンプレートを分割する

ヘッダーのテンプレートを作成

フッターのテンプレートを作成

サイドバーのテンプレートを作成

functions.phpを作成する

functions.phpとは

テンプレートに機能を導入する

テンプレートタグとは

ヘッダーロゴの実装

アイキャッチ画像表示機能の実装

ヘッダーとフッターのメニューを自動化する

サイドバーのカテゴリーを自動化する

サイドバーのタグを自動化する

記事一覧機能の実装