WordPressでオリジナルテーマを作る【第一回】簡易的なトップページを作る
みなさんがWordpressでブログを始める時の選択肢は、「無料のテーマから選ぶ」「有料のテーマから選ぶ」のどちらかでしょうか?
「自分でテーマを作る」という選択肢も意外と簡単にできます。
今までプログラミングなんてしたことがなくても、まずは実際にやって体験しましょう!
テキストエディターとFTPクライアントを使用します。
おすすめのテキストエディター
恋に落ちるテキストエディターSublimeText3インストールから日本語化まで3ステップ
おすすめのFTPクライアント
直接編集は危険!WPのテーマ(phpファイル)を安全に編集する為の3ステップ
目次
テーマ用にフォルダとファイルを用意する
まずはテーマを保存しておくためのフォルダを作成します
ここでは「sample」というフォルダを作りました。
好きなフォルダ名にして構いません。
次に用意するのは、
「index.php」と「style.css」の2ファイルです。
先ほど用意したフォルダ内に作成します。
「index.php」の記述
ファイルの拡張子は「.php」ですが、htmlを記述します。
PHP
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- </head>
- <body>
- Hello World
- </body>
- </html>
最低限HTMLとして成り立つだけの記述です。
プログラミングの学習開始ではおなじみの「Hello World」を表示して見ます。
「style.css」の記述
CSS
- /*
- Theme Name: frontenddaily.work
- Author: Atshushi Okumura
- Author URI: https://frontenddaily.work/
- Description: サンプルテーマ
- */
テーマの詳細情報を記述します。
上から順に、テーマの名前、製作者名、製作者サイトURL、簡易的な説明文です。
サーバーにテーマをアップロードする
WordPressのインストールされたフォルダ
/wp-content/themes/
に用意したフォルダごとアップロードします。
すでに他のテーマが設置されているかもしれませんが、気にせずアップロードしてください。
WordPressでテーマを有効化する
WordPressの管理画面を開きます。
外観 > テーマ をクリック

先ほど追加したテーマが一覧に追加されています。
style.cssで「Theme Name:」に設定した名前です。
テーマの詳細をクリックすると、先ほど「style.css」に記載した内容が↓のように表示されます。

「有効化」して、ブログの画面を確認して見ましょう。
「Hello World」と表示されれば、成功です。
ブログの情報を表示させる
次に、ブログ名とキャッチフレーズを表示してみます。
↓のように、「index.php」に記述を追加
PHP
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- </head>
- <body>
- <?php bloginfo('name'); // ブログ名 ?>
- <?php bloginfo('description'); // キャッチフレーズ ?>
- </body>
- </html>
書き換えたら、FTPクライアントを使用して、アップロード
実際の画面を確認します。
設定しているブログ名とキャッチフレーズが表示されていればOKです。
ブログ名や、説明文を設定していない場合は、先にそちらの設定をしてください。
設定 > 一般
から行います。
記事を表示させる
サンプルで構わないので、2、3記事ほど用意します。
↓の記述を追加
PHP
- <body>
- <?php bloginfo('name'); // ブログ名 ?>
- <?php bloginfo('description'); // キャッチフレーズ ?>
- <?php // ループ開始
- if(have_posts()): while(have_posts()): the_post(); ?>
- ここにループする処理を記述する
- <?php endwhile; endif;
- // ループ終了 ?>
- </body>
記事は登録されているものを全て(もしくはある程度の数を)表示します。
ループの処理の間に記述したものは、記事の数だけ繰り返される。
ループ内には↓の記述を追加
PHP
- <?php echo get_the_date(); // 投稿日時 ?>
- <?php the_category(', '); // カテゴリー ?>
- <a href="<?php the_permalink(); // 記事アドレス ?>"><?php the_title(); // 記事タイトル ?>
- <?php the_content(); // 記事本文 ?>
HTMLのタグの中にもphpの記述を入れることができます。
ここでは記事のタイトルに記事へのリンクをつけてみました。
まとめ
ここまでで、ブログのテーマとしては最低限、記事を表示できるテーマが出来上がりました。
デザイン性もなく、ブログとしてみると、必要な要素はまだまだあります。
が、ひとまずオリジナルテーマの一歩目は踏み出せました。
次回以降で、テーマの完成度をどんどん上げていきたいと思います。
ではでは〜
コメント一覧
まだ、コメントがありません