これだけカンタン!wordpressオリジナルテーマ構築

連休を使ってwordpressのオリジナルテーマを作成しました。

 
今まで何度か挑戦していたもののうまくいかなかったので、忘れ防止と同じようにつまずいている方の役に立てばと思い、作成方法を残しておこうと思います。

 

ディレクトリ構造・オリジナルテーマ用CSS記述

ディレクトリ構造とファイル名を以下の画像のように設定します。

index.php
トップページ・投稿一覧ページ
 
single.php
記事詳細ページ
 
functions.php
wordpressの機能呼び出しページ(サイドバー・アイキャッチ設定)
 
style.css
サイトのスタイル設定
 
imageフォルダ
サイトのスタイルで使う画像フォルダ
 
jsフォルダ
Javascript用フォルダ
 
各ファイル・フォルダは上記の役割をもちます。imageフォルダとjsフォルダは任意で作成してください。
 
style.cssには下記の内容を記述しておきます。
/*
Theme Name: テーマ名(自由)
Description: テーマ説明(自由)
Version: 1.0(テーマのバージョン(自由))
Author: 作成者名
Author URI: 作成者のサイトURLなど
*/
※これがないとwordpress管理画面でテーマ設定するときにエラーがでます。

 

wordpress管理画面でオリジナルテーマ導入

オリジナルテーマのフォルダの準備ができたらいよいよwordpressにテーマを入れます。

wordpress管理画面から 外観 > テーマ を選びます。
次に新規追加ボタンを押しテーマのアップロードボタンをクリックします。
ファイルを選択を押し、オリジナルテーマをzipフォルダにしたものをアップロードします。
うまくインストールできたら有効化を押すと、wordpressにオリジナルテーマが設定されます。

 

リンクURL指定

ここでサイトを確認すると、cssが適用されていないことがわかります。
cssを適用するにはURLをwordpress用に設定しなければなりません。
 

スタイルシートのリンクタグのhrefを上記を記述します。
これでstyle.cssが設定されます。
 

これと同様に画像のリンクもwordpress用に設定します。
/image/logo.pngの前に上記の記述を追加します。
 
これで、サイトがオリジナルテーマの見た目に適用できます。

 

投稿一覧表示

次にindex.phpに投稿一覧を表示します。
投稿一覧を表示したい場所に
 

 
上記のphpタグを記述します。
if(have_posts()): while(have_posts()): the_post(); で投稿記事をループします。
the_category(‘, ‘); でカテゴリー名を表示します。
the_permalink(); で記事のリンクを設定できます。
the_post_thumbnail(); でアイキャッチ画像を表示します。(この段階ではまだ表示されません)
the_title(); で記事タイトルを表示します。
the_content(続きを読む); で記事の内容を表示します。ここでは(続きを読む)となっていますので、続きの内容が隠れるように設定しています。
endwhile; endif;で投稿記事のループを終了します。
 
これで基本的な投稿記事一覧の表示ができます。タグを追加することで、投稿日時なども設定できます。
記事詳細ページについても上記のタグを指定することで、その記事ごとのタイトル・内容を表示することができます。
その際は、the_content(続きを読む);の部分をthe_content();とすることで、続きの内容を表示することができます。

 

サイドバー・アイキャッチ設定

ブログサイトといえば、記事ごとのアイキャッチ画像や最近の投稿・カテゴリ欄があるサイドバーがあります。
その表示の方法を紹介していきます。
まずfunctions.phpに
 

 
上記を記述します。
register_sidebar();でサイドバーの機能を有効にします。
add_theme_support(‘post-thumbnails’);でアイキャッチ画像の設定を有効にします。
これによって先ほどのthe_post_thumbnail();部分にアイキャッチ画像が表示されます。
そして、サイドバーを表示したい部分に

と記述することで、サイドバーが表示されます。
サイドバーの表示内容を変更したいときは、wordpressの管理画面の 外観 > ウィジェット から変更できます。
 
 
これらの設定で、最低限の要素を組み込んだwordpressのオリジナルテーマを作成することができます。
ちょっとしたスペルミスや記述場所のミスですぐにエラーがでてしまうので、一つずつ確認しながら進めるのが大事だなと感じました。
他にもたくさんの機能を追加することができるので、少しずつカスタマイズしてみようと思います。