copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2017/10/24

WordPressテーマを作成してみよう 〜準備編〜

Written by Yuki Motomiya

  • Wordpress

INDEX

    初めまして、エヴォワークスでコーダーをやっているY.M.です。

    WordPressのテーマ作成の方法を何回かに分けてご紹介します。
    今回はテーマ作成をする時の準備について難しいことは端折り必要な事だけを投稿したいと思います。

    テーマディレクトリ作成

    まず今から作るテーマのディレクトリを「wp-content > themes」に作成するところから始めましょう。

    index.phpとstyle.cssを用意

    index.phpとstyle.cssの2ファイルを用意しないとテーマとして認識できないので用意してください。

    index.php

    wordpressの基本となるファイル、主にアーカイブ系のテンプレートファイルになります。

    準備段階なのでまだ真っ白なファイルでも大丈夫ですが、念のためindex.phpの中にループを書いておきましょう。

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="UTF-8">
          <title><?php wp_title ( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
      </head>
      <body>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <!-- 投稿表示ここから -->
          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>
          <!-- //投稿表示ここまで -->
        <?php endwhile; ?>
          <!-- ページ送りなど -->
        <?php else: ?>
          <!-- 記事がない時の表示 -->
        <?php endif; ?>
      </body>
    </html>
    

    style.css

    テーマとして使えるようにするにはまずstyle.cssの冒頭にコメント形式でテーマの情報を入力する必要があります。

    「管理画面 > 外観 > テーマ」選択画面に表示、オリジナルテーマを配布する際にも必要な情報になるので必ず入力しておきましょう。

    @charset "UTF-8";
    /*
    Theme Name: テーマの名前
    Theme URI: テーマを配布しているURI
    Description: テーマの説明
    Author: 作者の名前
    Author URI: 作者のURI
    Version: バージョン情報
    Tags: テーマに関するキーワード
    License: ライセンス種類
    License URI: ライセンスのURI
    */
    

    スクリーンショット

    管理画面のテーマ選択画面(外観/テーマ)に表示されるテーマサムネイル画像を「screenshot.png」のファイル名で用意します。

    画像サイズは 880×660で作成し、テーマディレクトリに保存しましょう。

    テンプレートファイル

    以上のファイルが揃えばテーマとしては認識されますが、サイト全体は作成するにも足りないので以下のテンプレートファイルも用意しておきましょう。

    ちなみに全てのテンプレートファイルが必要ではないので、必要に応じてファイルを用意してください。

    comments.php

    コメント一覧、コメント入力フォームに使用

    header.php

    ヘッダーのテンプレート。
    以下のテンプレートタグで呼び出し可能。

    <?php get_header(); ?>

    footer.php

    フッターのテンプレート。
    以下のテンプレートタグで呼び出し可能。

    <?php get_footer(); ?>

    sidebar.php

    サイドバーのテンプレート
    ブログなどのサイドバーを作成しインクルードして使用。
    以下のテンプレートタグで呼び出し可能。

    <?php get_sideber(); ?>

    front-page.php

    フロントページテンプレート。
    home.phpとfront.phpが両方存在した場合は、front-page.phpがフロントページ表示用のテンプレートとして使われます。

    home.php

    ホームページテンプレート。
    フロントページの表示(にデフォルトとして設定されている最新の投稿)に使われる。固定ページをフロントページとして設定した場合、指定した固定ページがフロントページの表示に使われます。

    single.php

    個別記事のテンプレート。
    ループを書くときはindex.phpと同じでOK。

    single-<posttype>.php

    カスタム投稿タイプの個別記事を表示させる時に使用。
    <posttype>の部分をカスタム投稿タイプで設定したスラッグを入力。

    page.php

    固定ページのテンプレート。
    別々の固定ページテンプレートを利用することが可能。

    category.php

    カテゴリのテンプレート。
    カテゴリのアーカイブを表示

    tag.php

    タグのテンプレート。
    タグのアーカイブを表示。

    taxonomy.php

    タクソノミーのテンプレート。
    カスタムタクソノミのアーカイブを表示。

    author.php

    作成者のテンプレート。
    作者の書いた記事のアーカイブを表示。

    date.php

    日付別のテンプレート。
    日付、時刻毎のアーカイブを表示。
    年、月、日、時、分、秒。

    archive.php

    記事一覧のテンプレート。
    上記のアーカイブ全ての表示させる基本となるアーカイブテンプレート。

    search.php

    検索結果のテンプレート。

    attachment.php

    添付ファイルのテンプレート。
    添付ファイルを個別で表示するときに使用。

    image.php

    添付画像ファイルテンプレート。
    特定の画像ファイルを個別で表示するときに使用。
    存在しない場合は attachment.php が使用される。

    404.php

    404 Not Foundのテンプレート。

    とりあえず準備は完了

    ひとまずこれだけでテーマとして使用できる状態になりました。
    自分はだいたい以下のようなものを先に用意してから作業始めることが多いです。

    • index.php
    • home.php
    • single.php
    • page.php
    • header.php
    • footer.php
    • style.php
    • screenshot.png

    これだけで簡単なブログは十分作成できます。

    次回はアーカイブと個別記事について書きたいと思います。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View