【WordPress】テーマの作り方

  • このエントリーをはてなブックマークに追加
Wordpressロゴ

WordPressのテーマを自分で作ってみています。
無料の素敵テーマでステキやん♪て思っていたのですが、
仕事でテーマを作った所思ったよりも簡単だったので、じゃぁ作ってみようかという流れです。すみません。

で、テーマ作りの流れをまとめました。



  1. まずデザインを普通にコーディング。▼
  2. 拡張子をPHPに変える。▼
  3. CSSファイルを編集。(テンプレートと認識させる)▼
  4. テーマを入れるフォルダを作って、ファイルを入れる。▼
  5. ———————————————————————
    ここまでで、管理画面からテーマの変更・選択が可能
    ———————————————————————
  6. index.phpのリンク関係をテンプレートタグに書き換える。▼
  7. index.phpをパーツ化(分割)する。▼
  8. パーツ編集 header.php |テンプレートタグに書き換える▼
  9. パーツ編集 header.php |テンプレートと認識させる▼
  10. パーツ編集 index.php |WPループに書き換える▼
  11. パーツ作成 function.php |テーマをウィジェット対応にする▼
  12. パーツ編集 sidebar.php |ウィジェットを表示させる▼
  13. パーツ編集 footer.php |テンプレートと認識させる▼



1.まずデザインを普通にコーディング。

HTML+CSS(index.html + style.css)でコーディングします。
出来ればscreenshot.png(640*480)も用意するとハッピーですw

2.拡張子をPHPに変える。

index.html → index.php に変更します。

3.CSSファイルを編集。(テンプレートと認識させる)

CSSファイルの最初に以下追記。
     /*
      Theme Name:作ったテーマ名(必須)
     */
他にも、
      Author:名前
      Author URI:URL
      Version:バージョン
などがあるけど、必須ではないです。

4.テーマを入れるフォルダを作って、ファイルを入れる。

wp-content/themes/作ったテーマ名 でフォルダを作成します。
上記のフォルダに、ここまでに作ったindex.php ・ style.css・(作っていれば)screenshot.png を入れます。

ここまでの作業で、もうWPの管理画面からテーマの選択・変更が可能になります。
・・・意外にあっさりできる気がしませんか?私は単純なので、そう思ったから作ってみてますw

screenshot.pngを作っておくと、管理画面上でサムネイルが出るのでそれらしくなりますw

5.index.phpのリンク関係をテンプレートタグに書き換える。

//テンプレートのディレクトリのURI取得
<?PHP echo get_template_directory_uri(); ?>

//テンプレートのスタイルシートファイルのURI取得
<?PHP echo get_stylesheet_uri(); ?> 

6.index.phpをパーツ化(分割)する。

  • ヘッダー・・・header.php
  • サイドバー・・・sidebar.php
  • フッター・・・footer.php
  • 残り(コンテンツ部分)・・・index.php
上記4つに分けます。
分けた後、パーツに分けてPHPファイルをindex.phpに読み込ませるために、
index.phpファイルにタグを記述します。
//以下を記述した箇所で、header.phpが表示される
<?PHP get_header(); ?>

//以下を記述した箇所で、sidebar.phpが表示される
<?PHP get_sidebar(); ?>

//以下を記述した箇所で、footer.phpが表示される
<?PHP get_footer(); ?>
wordpressのパーツ

7.パーツ編集 header.php |テンプレートタグに書き換える

書き換えられる所は書き換えましょう。

テンプレートタグは以下。
//サイト名を出力する
<?PHP bloginfo('name'); ?>
 //記述サンプル
 <title><?PHP bloginfo('name'); ?></title>

//サイトの概要・説明文の出力する
<?PHP bloginfo('description'); ?>
 //記述サンプル
 <meta name="description" content="<?PHP bloginfo('description'); ?>" />

//トップページのURLを出力する
<?PHP home_url(); ?>
 //記述サンプル
 <h1><a href="<?PHP home_url(); ?>" title="<?PHP bloginfo('name'); ?>"><?PHP bloginfo('name'); ?></a></h1>


//例えば、記事ページ(single.php)で『記事名|サイト名』と記述したい場合
<title><?PHP wp_title('|',true,'right'); ?><?PHP bloginfo('name'); ?></title>
//→記事名の右側(right)に、「|」という区切り文字を入れる。trueは表示、falseは値を返します。

8.パーツ編集 header.php |テンプレートと認識させる

header.phpの、タグの直前に以下の様にソースを記述します。
<?PHP if(is_singular()) wp_enqueue_script("comment_reply"); ?>
<?PHP wp_head(); ?>
</head>
1行目は、コメント投稿用のJavaScriptを読み込むため、
2行目は、このheader.phpファイルをWPでテンプレートとして使えるようにするためです。

9.パーツ編集 footer.php |テンプレートと認識させる

header.phpと同じように、footer.phpもテンプレートとして使えるようにするためにソースを記述します。
記述する箇所は、の直前です。

         <?PHP wp_footer(); ?>
         </body>

10.パーツ編集 index.php |WPループに書き換える

基本的なWPループの記述は以下。
if (have_posts()):
    while (have_posts()): the_post();
    endwhile;
else:
endif;
詳しくは別記事でまとめます。ここで書くと長すぎちゃう…。
しかもまとめないと自分の脳みそがパーンッってなる。

ちなみに、以下の様にタグを記述しておくと、自動でクラスをつけてくれます。
CSSのスタイリングがやりやすくなります♪

<!--bodyタグで使うと、記事IDやカテゴリー名などが出ます-->
<body <?PHP body_class(); ?> >

<!--WPループ使った時、記事を1記事毎に括るタグで使うと良い-->
<div id="post-<?PHP the_ID(); ?>" <?PHP post_class(); ?> >

11.パーツ作成 function.php |テーマをウィジェット対応にする

管理メニュー左側の 外観>ウィジェットで、サイドバーのコンテンツの並び替えや管理が簡単に出来るのですが、
これを自作のテーマでも使えるようにするために、以下のソースを記述します。
<?PHP register_sidebar( array(
              'name' => 'サイドバーウィジェット-1',
                        'id' => 'sidebar-1',
                        'description' => 'サイドバーのウェジェットエリア', //サイドバーの説明なのでなくても良い
                        'before_widget' => '<div id="%1$s" class="widget%2$s">', //%1$sは、ID・クラス付与のため
                        'after_widget' => '</div>',
                        ));
?>

12.パーツ編集 sidebar.php |ウィジェットを表示させる

テーマでウィジェットが使えるようにしたので、次は編集したウィジェットをサイドバーに表示するようにします。
         <div id="sidebar">
              <?PHP if(is_active_sidebar ('sidebar-1')):
                   <!--管理画面で設定したものがあれば表示-->
                   dynamic_sidebar('sidebar-1');
              else: ?>
                   <!--管理画面で設定したものがない場合は以下で表示-->
                   <div class="widget">
                        <h2>ウィジェットなし</h2>
                   </div>
              <?PHP endif; ?>
         </div>


基本的なテーマはこれだけで完成です。
例えば、固定ページのデザインは変えたい場合は、index.phpを元に page.php を作ればOK。
ブログ記事(投稿記事)の単独表示のページを変えたい場合は、index.phpを元に、 single.php を作ればOKです。

あとはCSSとかによるスタイリングするだけ!
PHP分からなくても、案外簡単にできますよね♪

Leave a Reply

  • (will not be published)

CAPTCHA