WordPressの勉強を独学で始めてみた（その３：既存のテンプレートをカスタマイズしてみる）

「MAMP」をインストールし、自分のPCでようやくWordPressの開発する準備が整いましたので、これから具体的にWordPressのカスタマイズについて学習していこうと思います。

既存のテーマを使ってカスタマイズする

前回に引き続き、「ともすた」さんのYoutube動画を見ながら学習していきました。

動画を見ながら実際に手を動かしてコードを書いていくことで理解が深まりますね。ほしい情報がいつでも見られて学習ができてしまうなんて、いい時代になったものですよね。

動画で学習した内容を自分なりにまとめてみようと思います。

プログラミングはアウトプットが大切ですよね。

テンプレートの準備の仕方

WordPressにテーマを認識させる

管理画面からテーマを選択できますが、以下の場所に「index.php」「style.css」の２つのファイルを作成することで自分でテーマを作成することができるようになります。

次に「style.css」に以下の内容をコメントアウトで記入することにより、テーマの詳細が表示されるようになります。

/*
Theme Name:@tamasabrow
Author:@tamasabrow
Version:1.0
Description:WordPressを始めてみました。
*/

すると外観　＞　テーマ　でこんな感じであらたにテーマを作成することができました。

「テンプレートタグ」を実装していく

「index.php」を開きテキストエディタに以下のコードを記入していきます。

画面上部にヘッダーを表示させる

　<?php wp_head(); ?>

</head>

　<?php wp_footer(); ?>

</body>

ブログのポスト部分を整えてていく

<?php while (have_posts()): the_post(); ?> /* 繰り返し構文 */

      <div class="post-preview">
        <a href="<?php the_permalink(); ?>"> /* 記事ページへのリンクを出力する */

          <h2 class="post-title">
            <?php the_title(); ?>  /* ブログタイトルを表示 */
          </h2>

          <h3 class="post-subtitle">
            <?php the_excerpt() ?>  /* ブログ記事を抜粋表示 */
          </h3>

        </a>

         <p class="post-meta">Posted by
            <?php the_author(); ?>　　/* 投稿者を表示 */
            <?php the_time( 'Y-m-d' ); ?>　/* 投稿日時を表示 */
　　　　　</p>

      </div>
      <hr>

<?php endwhile; ?> /* 繰り返し構文終了 */

これであらたにブログが投稿できるようになりました。

基本の内容を理解できれば、自分のテーマを作成した場合にも応用できそうですね。

ほとんど自分のメモのような感じになってしまってますね。