ZeroPlus Media > Web制作 > WordPress > ブログサイトをWordPress化しよう基盤編

ブログサイトをWordPress化しよう基盤編

Web制作

2022/07/20

2023/06/08

本記事では、HTMLで制作したものをWordPress化していきます。

いくつかの記事に分けて教材のWordPress化を行っていき、今回は基盤編になります。

この記事で身につく内容

教材を使ってブログサイトをWordPress化する

案件が取れなくて悩んでいるあなたへ

プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。

営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか？

またゼロからやり直さないといけないの？
本当にフリーランスになれるの？

といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK！

＼お申し込みは30秒で終わります。／

まずは無料で相談してみる

新しい一歩を、今踏み出してみませんか？

今回WordPress化するデザイン
準備
WordPress化する
まとめ

今回WordPress化するデザイン

WordPress化するのはブログサイトのトップページのみになります。

ひとつひとつのステップを詳しく解説しているので、本記事を通してまずは「WordPress化」の流れのイメージを掴みましょう。

準備

WordPressのテーマを作成していく過程として、ファイルの準備や開発環境（Local）にテーマファイルを設置しなければなりません。WordPressはPHPの言語でありサーバーサイド言語になるため、サーバーの環境が必要不可欠になります。HTMLのようにブラウザだけがあれば状態を確認できるようなものではなく、サーバーの環境下に配置して初めて確認をすることができます。

ひとつひとつ確認しながら次に進んでください。

教材のダウンロード

まず始めに、本記事で使用していく教材をダウンロードしましょう。

ダウンロード

圧縮ファイルとしてダウンロードされるので、「解凍（展開）」してファイルの中身を確認しましょう。

フォルダ名は異なりますが、中身としては「デザインデータからコーディング！ブログサイトのレスポンシブ化」で完成されたHTMLファイルと同じになります。

デザインデータからコーディング！ブログサイトのレスポンシブ化

ファイルの中身

Localの起動とプロジェクトの作成

まずは「WordPressを勉強する準備をしよう」で導入した「Local」を起動します。

Localを起動しプロジェクト新規作成

上記画像の中央にある「+ CREATE A NEW SITE」をクリックするか、左下にある「+」アイコンボタンをクリックして、新しくプロジェクトを作成します。

プロジェクトのフォルダ名

新しくプロジェクトを作成すると、いくつか設定が必要になります。

まずはプロジェクトのフォルダ名を入力しましょう。今回は、「ZPM-WP」というプロジェクト名で作成します。

バージョン設定

次に画面遷移すると、PHPやMySQLなどのバージョンを設定することができます。今回は特に指定する必要もないので、「Preferred」のまま右下の「CONTINUE」をクリックします。

WordPressでログインするIDとPW

次にWordPressにログイン時などにしようするIDとパスワードを決めましょう。任意で問題ありませんが、記事の通りに進めるのであれば以下のように指定してあげてください。（メールアドレスはそのままで問題ありません）

入力ができたら、右下の「ADD SITE」をクリックします。

項目	値
WordPress Username	zeroplus
WordPress Password	zeroplus

プロジェクトの作成完了

「ADD SITE」をクリックして、少し待つとプロジェクトの作成が完了します。

その他、WordPressの管理画面の開き方や言語設定などは「WordPressを勉強する準備をしよう」で詳しく紹介しているので、ご覧ください。

【画像付き】Local を使ってサクッとWordPressの環境構築をしよう

教材をLocalのプロジェクト配下に移動する

Localにて「ZPM-WP」というプロジェクトを作成しました。

これからダウンロードした教材をWordPress化しつつブラウザで状態を確認しながら進めていきたいので、教材を「ZPM-WP」プロジェクトのzpmwp/app/public/wp-content/themes配下に移動させます。

分かりづらい部分なので、以下のステップをひとつひとつ確認しながら進めてください。

Localからプロジェクトフォルダを開く

画像の赤い囲ったアイコン部分をクリックすることができるので、クリックします。

すると、Finderもしくはエクスプローラーが起動し、Localのzpmwpフォルダの場所が開かれます。

themesフォルダまで深ぼる

zpmwpフォルダの中にはWordPressシステムファイルなど様々なファイルが入っています。

上記画像のように、「themes」フォルダまで開きましょう。

zpm > app > public > wp-content > themes

教材の中のsrcフォルダをthemesに移動する

ダウンロードして展開した教材の中にあるsrcフォルダをthemesフォルダの配下にドラッグ&ドロップ等で移動させます。

srcフォルダの名前を変更する

srcのままだとどんなテーマなのかが分かりづらいので、「zpm-wp」に名称を変更します。

これで、教材をLocal配下に移動することができました。

WordPress化する

ここからは、実際にエディタを開きzpm-wpをWordPress化していきます。

冒頭でも伝えた通り、何記事かに分けて完成させるため、今回はトップページを表示できるところまでのWordPres化になります。

エディタでテーマを開く

themes配下に移動したzpm-wpフォルダをエディタで開きます。

必要なファイルを作成する

既存のHTMLをWordPress化するにあたって、必要なテンプレートファイルを作成しましょう。

今回作成するブログサイトは小さい規模になるので、以下のようにファイルを作成します。

ページ名	ファイル名
トップページ（記事一覧ページ）	index.php
ヘッダー部	header.php
フッター部	footer.php
サイドバー部	sidebar.php
その他処理等	functions.php
※必須ファイル（テーマ識別）	style.css

このように作成ができました。

cssフォルダに入っているstyle.cssをmain.cssに名称変更

style.cssはすでにcssフォルダの中にもstyle.cssが入っているので、cssフォルダに入っているstyle.cssの方をmain.cssに名称を変更しましょう。

style.cssに必要な記述を加える

新規に作成したstyle.cssに必要な記述を加えましょう。

ページの装飾等はreset.cssやmain.cssで行っているので、style.cssにはテーマ情報のみ記述します。

style.cssのコード

/*
Theme Name: ZeroPlus Media Blog
*/

今回はTheme Nameのみを記述します。その他のテーマ情報は必要に応じて追加してあげましょう。詳しくはこちらの記事で解説しています。

管理画面からテーマを有効化する

WordPressの管理画面の開き方や言語設定などは「WordPressを勉強する準備をしよう」で詳しく紹介しているので、ご覧ください。

【画像付き】Local を使ってサクッとWordPressの環境構築をしよう

管理画面のサイドバーにある「外観 > テーマ」をクリックするとテーマの一覧が表示されているので、その中から「ZeroPlus Media Blog」を有効化にします。

サイトを表示する

有効化にしているテーマをサイトで表示して結果を確認しましょう。

管理画面の左上の家のアイコンをホバーすると「サイトを表示」と出てくるので、その上で右クリックして、「新しいタブで開く」をクリックして、別タブでサイトを開きましょう。

テーマ作成をしてる際に管理画面とサイトをいったり来たりとすることが多いので、別タブで開いた方が効率がいいです。

実際にサイトを表示してみると、真っ白のページが表示されました。

index.phpが表示されていますが、index.phpにはなにも記述していないので、結果としてなにも表示されてません。

index.htmlの中身をindex.phpにコピペする

index.htmlにはすでにトップページのHTMLが記述されています。

エディタに戻って、トップページを表示されるようにindex.htmlのコードをすべてindex.phpにコピペしましょう。

結果の確認

index.phpにコピペできたら、保存して、ブラウザでサイトを表示し、ブラウザを更新してみましょう。

すると、HTMLの内容が反映されているのが分かるかと思います。

ただ、スタイルが効いていなかったり、画像が読み込まれていなかったりなどしてます。

スタイルを適用する

HTMLは表示されたものの、スタイルがうまく読み込められてないので、functions.phpにスタイルの読み込みを行います。

読み込みたいものは以下の3つです。

Google Fonts
reset.css
main.css

これらを読み込むために、以下を記述しましょう。

functions.phpのコード

<?php
  add_action('wp_enqueue_scripts', 'add_styles');

  function add_styles() {
    // google fonts
    wp_register_style(
      'google-fonts_style',
      'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
      array(),
      '1.0'
    );

    // reset style
    wp_register_style(
      'reset_style',
      get_template_directory_uri() . '/css/reset.css',
      array(),
      '1.0'
    );

		// main style
    wp_enqueue_style(
      'main_style',
      get_template_directory_uri() . '/css/main.css',
      array('reset_style', 'google-fonts_style'),
      '1.0'
    );
  }
?>

それぞれの意味については、「WordPressでCSSを読み込もう」で詳しく解説しているのでご覧ください。

WordPressでCSSを読み込もう

読み込みコードはかけましたが、</head>の前にwp_head();記述しなければ、functions.phpは実行されません。index.phpに追加しましょう

index.phpのコード（抜粋）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ZeroPlus Blog</title>

    <?php wp_head(); ?>
  </head>

  <body>
  <!-- ・・・省略・・・ -->

</head>の直前にwp_head();を追加し、既存であったlinkタグはすべて削除しましょう。

その後サイトを表示してリロードしてみましょう。

結果の確認

スタイルが問題なく適用されました。

画像を読み込む

スタイルは適用されましたが、画像がまだ表示されていません。

今回はすべてのimgタグで読み込まれている画像を対象に関数を適用させます。

変更前のimgタグ

<img
  src="img/thumb_article.jpg"
  alt=""
  width="686"
  height="384"
  class="post-thumb"
/>

変更後のimgタグ

<img
  src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article.jpg' ); ?>"
  alt=""
  width="686"
  height="384"
  class="post-thumb"
/>

このようにget_template_directory_uri();やesc_url();などを使って画像を読み込みます。

ここまでのindex.phpのコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ZeroPlus Blog</title>

    <?php wp_head(); ?>
  </head>

  <body>
    <header class="header">
      <div class="header-inner">
        <h1 class="logo">
          <a href="index.html" class="logo-link">ZeroPlus Blog</a>
        </h1>
        <p class="header-heading">日々の学習を記録するブログ</p>
      </div>
      <!-- /.header-inner -->
    </header>

    <div class="top-container">
      <main class="main">
        <div class="posts">
          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">初心者のやりがちなミス</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article02.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">SEO対策できてる？HTMLの正しい書き方</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article03.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">フリーランスにおすすめの資金運用の話</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article04.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">タスク管理ツールのおすすめツール5選！</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article05.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">フリーランス必見！経費申請のやり方</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article06.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">穴場のコワーキングスペース！</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>
        </div>
      </main>
      <aside class="aside">
        <div class="recommend">
          <h2 class="recommend-title">おすすめ記事</h2>

          <ul class="recommend-list">
            <li class="recommend-item">
              <a href="" class="recommend-item-link">・web制作</a>
            </li>
            <li class="recommend-item">
              <a href="" class="recommend-item-link">・プログラミング</a>
            </li>
            <li class="recommend-item">
              <a href="" class="recommend-item-link">・webデザイン</a>
            </li>
            <li class="recommend-item">
              <a href="" class="recommend-item-link">・マーケティング</a>
            </li>
          </ul>
        </div>

        <div class="aside-bnrs">
          <a href="" class="bnr-item">
            <img
              src="<?php echo esc_url( get_template_directory_uri() . '/img/bnr_advertising.jpg' ); ?>"
              alt=""
              width="686"
              height="272"
              class="bnr-img"
            />
          </a>
          <a href="" class="bnr-item">
            <img
              src="<?php echo esc_url( get_template_directory_uri() . '/img/bnr_advertising02.jpg' ); ?>"
              alt=""
              width="686"
              height="272"
              class="bnr-img"
            />
          </a>
          <a href="contact.html" class="bnr-item">
            <img
              src="<?php echo esc_url( get_template_directory_uri() . '/img/img_contact-form.jpg' ); ?>"
              alt=""
              width="686"
              height="272"
              class="bnr-img"
            />
          </a>
        </div>
      </aside>
    </div>
    <!-- /.top-container -->

    <footer class="footer">
      <small class="footer-copyright">&copy; 2018 sample inc.</small>
    </footer>
  </body>
</html>

結果の表示

画像が表示されました。

トップページへのリンクを関数化する

ヘッダーにある「ZeroPlus Blog」に対してリンクで、index.htmlへ飛ばすようにしているので、関数化します。

変更前のコード

<header class="header">
  <div class="header-inner">
    <h1 class="logo">
      <a href="index.html" class="logo-link">ZeroPlus Blog</a>
    </h1>
    <p class="header-heading">日々の学習を記録するブログ</p>
  </div>
</header>

変更後のコード

<header class="header">
  <div class="header-inner">
    <h1 class="logo">
      <a href="<?php echo esc_url( home_url() ); ?>" class="logo-link">ZeroPlus Blog</a>
    </h1>
    <p class="header-heading">日々の学習を記録するブログ</p>
  </div>
  <!-- /.header-inner -->
</header>

このようにhome_url();やesc_url();などを使ってURLを埋め込みます。

テンプレートパーツファイルに分割する

index.phpのコードを以下のパーツファイルに分割します。

header.php
footer.php
sidebar.php

ヘッダー部をheader.phpへ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ZeroPlus Blog</title>

    <?php wp_head(); ?>
  </head>

  <body>
    <header class="header">
      <div class="header-inner">
        <h1 class="logo">
          <a href="<?php echo esc_html( home_url() ); ?>" class="logo-link">ZeroPlus Blog</a>
        </h1>
        <p class="header-heading">日々の学習を記録するブログ</p>
      </div>
      <!-- /.header-inner -->
    </header>

フッター部をfooter.phpへ

    <footer class="footer">
      <small class="footer-copyright">&copy; 2018 sample inc.</small>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

</body>の前にwp_footer();を追記しておきましょう。

サイドバー部をsidebar.phpへ

<aside class="aside">
    <div class="recommend">
        <h2 class="recommend-title">おすすめ記事</h2>

        <ul class="recommend-list">
        <li class="recommend-item">
            <a href="" class="recommend-item-link">・web制作</a>
        </li>
        <li class="recommend-item">
            <a href="" class="recommend-item-link">・プログラミング</a>
        </li>
        <li class="recommend-item">
            <a href="" class="recommend-item-link">・webデザイン</a>
        </li>
        <li class="recommend-item">
            <a href="" class="recommend-item-link">・マーケティング</a>
        </li>
        </ul>
    </div>

    <div class="aside-bnrs">
        <a href="" class="bnr-item">
        <img
            src="<?php echo esc_url( get_template_directory_uri() . '/img/bnr_advertising.jpg' ); ?>"
            alt=""
            width="686"
            height="272"
            class="bnr-img"
        />
        </a>
        <a href="" class="bnr-item">
        <img
            src="<?php echo esc_url( get_template_directory_uri() . '/img/bnr_advertising02.jpg' ); ?>"
            alt=""
            width="686"
            height="272"
            class="bnr-img"
        />
        </a>
        <a href="contact.html" class="bnr-item">
        <img
            src="<?php echo esc_url( get_template_directory_uri() . '/img/img_contact-form.jpg' ); ?>"
            alt=""
            width="686"
            height="272"
            class="bnr-img"
        />
        </a>
    </div>
</aside>

index.phpから各テンプレートパーツファイルに分割しました。

あとは分割したものを読み込みます。

index.phpのコード

<?php get_header(); ?>
    <div class="top-container">
      <main class="main">
        <div class="posts">
          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">初心者のやりがちなミス</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article02.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">SEO対策できてる？HTMLの正しい書き方</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article03.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">フリーランスにおすすめの資金運用の話</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article04.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">タスク管理ツールのおすすめツール5選！</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article05.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">フリーランス必見！経費申請のやり方</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>

          <article class="post">
            <a href="" class="post-thumb-wrapper">
              <img
                src="<?php echo esc_url( get_template_directory_uri() . '/img/thumb_article06.jpg' ); ?>"
                alt=""
                width="686"
                height="384"
                class="post-thumb"
              />
            </a>

            <div class="post-txts">
              <h3 class="post-title">
                <a href="">穴場のコワーキングスペース！</a>
              </h3>
              <p class="post-content">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
              </p>
              <div class="post-btn-wrapper">
                <a href="" class="post-btn">続きを読む</a>
              </div>
              <!-- /.post-btn-wrapper -->
            </div>
            <!-- /.post-txts -->
          </article>
        </div>
      </main>
      
      <?php get_sidebar(); ?>
    </div>
    <!-- /.top-container -->
<?php get_footer(); ?>

もともとヘッダー、フッター、サイドバーがあった箇所で読み込み関数を実行しています。