WordPressでオリジナルテーマを作る【第一回】簡易的なトップページを作る

みなさんがWordpressでブログを始める時の選択肢は、「無料のテーマから選ぶ」「有料のテーマから選ぶ」のどちらかでしょうか？
「自分でテーマを作る」という選択肢も意外と簡単にできます。
今までプログラミングなんてしたことがなくても、まずは実際にやって体験しましょう！

テキストエディターとFTPクライアントを使用します。
おすすめのテキストエディター 恋に落ちるテキストエディターSublimeText3インストールから日本語化まで3ステップ
おすすめのFTPクライアント
直接編集は危険！WPのテーマ（phpファイル）を安全に編集する為の3ステップ

目次

テーマ用にフォルダとファイルを用意する

まずはテーマを保存しておくためのフォルダを作成します
ここでは「sample」というフォルダを作りました。
好きなフォルダ名にして構いません。

次に用意するのは、
「index.php」と「style.css」の２ファイルです。
先ほど用意したフォルダ内に作成します。

「index.php」の記述

ファイルの拡張子は「.php」ですが、htmlを記述します。

PHP

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. </head>
  5. <body>
  6. Hello World
  7. </body>
  8. </html>

最低限HTMLとして成り立つだけの記述です。
プログラミングの学習開始ではおなじみの「Hello World」を表示して見ます。

「style.css」の記述

CSS

  1. /*
  2. Theme Name: frontenddaily.work
  3. Author: Atshushi Okumura
  4. Author URI: https://frontenddaily.work/
  5. Description: サンプルテーマ
  6. */

テーマの詳細情報を記述します。
上から順に、テーマの名前、製作者名、製作者サイトURL、簡易的な説明文です。

サーバーにテーマをアップロードする

WordPressのインストールされたフォルダ
/wp-content/themes/
に用意したフォルダごとアップロードします。

すでに他のテーマが設置されているかもしれませんが、気にせずアップロードしてください。

WordPressでテーマを有効化する

WordPressの管理画面を開きます。
外観 ＞ テーマ をクリック


ワードプレス＞外観＞テーマ

先ほど追加したテーマが一覧に追加されています。
style.cssで「Theme Name:」に設定した名前です。

テーマの詳細をクリックすると、先ほど「style.css」に記載した内容が↓のように表示されます。


ワードプレス、テーマの有効化

「有効化」して、ブログの画面を確認して見ましょう。
「Hello World」と表示されれば、成功です。

ブログの情報を表示させる

次に、ブログ名とキャッチフレーズを表示してみます。
↓のように、「index.php」に記述を追加

PHP

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. </head>
  5. <body>
  6. <?php bloginfo('name'); // ブログ名 ?>
  7. <?php bloginfo('description'); // キャッチフレーズ ?>
  8. </body>
  9. </html>

書き換えたら、FTPクライアントを使用して、アップロード
実際の画面を確認します。
設定しているブログ名とキャッチフレーズが表示されていればOKです。

ブログ名や、説明文を設定していない場合は、先にそちらの設定をしてください。
設定 ＞ 一般
から行います。

記事を表示させる

サンプルで構わないので、２、３記事ほど用意します。

↓の記述を追加

PHP

  1. <body>
  2. <?php bloginfo('name'); // ブログ名 ?>
  3. <?php bloginfo('description'); // キャッチフレーズ ?>
  4. <?php // ループ開始
  5. if(have_posts()): while(have_posts()): the_post(); ?>
  6. ここにループする処理を記述する
  7. <?php endwhile; endif;
  8. // ループ終了 ?>
  9. </body>

記事は登録されているものを全て（もしくはある程度の数を）表示します。
ループの処理の間に記述したものは、記事の数だけ繰り返される。

ループ内には↓の記述を追加

PHP

  1. <?php echo get_the_date(); // 投稿日時 ?>
  2. <?php the_category(', '); // カテゴリー ?>
  3. <a href="<?php the_permalink(); // 記事アドレス ?>"><?php the_title(); // 記事タイトル ?>
  4. <?php the_content(); // 記事本文 ?>

HTMLのタグの中にもphpの記述を入れることができます。
ここでは記事のタイトルに記事へのリンクをつけてみました。

まとめ

ここまでで、ブログのテーマとしては最低限、記事を表示できるテーマが出来上がりました。
デザイン性もなく、ブログとしてみると、必要な要素はまだまだあります。
が、ひとまずオリジナルテーマの一歩目は踏み出せました。

次回以降で、テーマの完成度をどんどん上げていきたいと思います。
ではでは〜

HTML, PHP, WordPressHTML5, PHP, WordPress

Posted by アツシオクムラ