Home > wordpress > 既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順

既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順

vanillate
2015-08-17 Mon 16:32:17
wordpress

HTMLファイルのほうが多くを占めるサイトの場合、「既存のテーマファイルをカスタマイズするより、htmlファイルをベースに構築したほうが早いかも」、と思うことがあり、最低限どこを直していけばいいかを書いてみたいとおもいます。

下準備

テーマの基準となる.htmlファイルを
/WPの置かれているフォルダ/wp-content/themes/new_theme
内にコピーします。ファイル名は、index.php に変更。
「new_theme」は、好きなテーマファイル名でOKです。

css、js、画像フォルダは、既存のhtml郡の中に置いたままでもいいですし
/new_theme内に複製コピーしてもOKです。

各ファイルパスだけ、相対パスだとWPのパーマリンク設定によってはうまく動かないことがあるので

WPのテーマフォルダと違うところにある場合は絶対パスで
http://xxxx.com/css/css.css
のように指定をし

テーマフォルダ内にある場合は
<?php bloginfo('template_url'); ?>/css/css.css
というように引いてあげるといいです。

style.cssと、screenshot.pngを準備

/wp-content/themes/new_theme/style.css
を新規作成しておきます。
これは、WPのテーマファイルの設定を置いておくものでもあるので
他のCSSファイルがある場合でも作成します。

style.css

style.css　には、下記を１行目〜に追加します。

/*
Theme Name: ★テーマ名★
Theme URI: ★テーマの説明があるURL★
Description:★テーマの説明★
Version: ★バージョン★
Author: ★作成者★
Author URI: ★作成者のURL★
*/

納品用のテーマなら、テーマ名はサイト名、URL系はサイトのアドレス、バージョンは1とかで、作成者もお客様のお名前やサービス名でいいとおもいます。

screenshot.png

必須ではないですが、わかりやすいように screenshot.png を準備しておきます。
テーマのスクリーンショットを撮って、「screenshot.png」という名前で保存し
/wp-content/themes/new_theme/screenshot.png
へ追加します。

▲ここに表示されます。

screenshot.pngを準備しておくと、
「外観＞テーマ」の管理画面で、スクリーンショットが出るようになり、わかりやすいです。
サイズは 880×660 ぐらいでOKです。

<title>タグとwp_head()、wp_footer()を追加

では、先ほど追加した元.htmlファイルを修正していきます。
/wp-content/themes/new_theme/index.php
を変更していきます。

<title>タグ

タイトルタグは、WordPressから引いておくほうが便利です。後々SEOなプラグインを利用する場合も勝手に切り替えてくれますので。

■before

<title>サイトタイトル</title>

■after

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

と差し替えます。

wp_head()を</head>直前に置く

<?php wp_head(); ?>

という関数を、</head>タグの直前に置いておきましょう。プラグインなどが利用する場合があります。

wp_footer()を</body>直前に置く

<?php wp_footer(); ?>

という関数も、</body>タグの直前に置いておきましょう。
管理バーを表示させたり、アクションフックに利用したりする場合があります。

<body>タグ

<body>タグにはWordPress独自のclass付けができるので、追加します。

■before

<body>

■after

<body <?php body_class(); ?>>

WordPressの記事一覧を表示するエリア

index.php は、記事の一覧や、カテゴリー、タグなどの一覧として利用するファイルとなりますので、WPのループを表示予定のdiv内、コンテンツ部分に貼り付けます。
もともとコンテンツ部分のdivタグの中にデータがあった場合は削除しておきます。（後で内容を確認したい場合はバックアップしておいてくださいね。）

<?php if (have_posts()) : ?>

	<?php while (have_posts()) : the_post(); ?>

		<?php // Individual Post Styling ?>

	<?php endwhile; ?>

		<?php // Navigation ?>

	<?php else : ?>

		<?php // No Posts Found ?>

<?php endif; ?>

これが、基本形ですが、すこし色をつけるなら（bee_tmplから引用ですが）こんな感じ。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>


      <div class="post">

      <h2 class="title">
          <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
          <?php the_title(); ?>
          </a>
      </h2>

      <div class="blog_info contentsbox">
          <ul>
          <li class="cal"><?php the_time('Y/m/d') ?></li>
          <li class="cat"><?php the_category(', ') ?></li>
          <li class="tag"><?php the_tags('', ', '); ?></li>
          </ul>
      </div>


     <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>

           <div class="thecontent"><?php the_content('続きを読む'); ?></div>

     </div><!-- /.post -->


    <?php endwhile; ?>




        <div class="nav-below">
          <span class="nav-previous"><?php next_posts_link('古い記事へ') ?></span>
          <span class="nav-next"><?php previous_posts_link('新しい記事へ') ?></span>
        </div><!-- /.nav-below -->


<?php endif; ?>

ここまでで、一旦WP内で新規テーマを適用し、動作を見てみましょう。
WP内の記事一覧が表示されていれば、最低限のテーマ設定はおわりです。

ただ、ここで終わると、ヘッダーやメニューなど、同じものを表示する部分を何度も書かなくてはいけなくなるので、あとあと管理が面倒です。ファイルの切り分けをしていきます。

heder.php、footer.php、sidebar.phpを準備

index.phpのヘッダー部分（ファイルの１行目〜ヘッダーdivの表示部分まで）を、切り取り cmd + x し、新規で

/wp-content/themes/new_theme/header.php

を作成し、貼り付けます。

index.php側の切り取った部分には、

<?php get_header(); ?>

を置いておきます。これで、「header.php」を参照させることができます。

同じ要領で、フッター部分のdivタグ＋</body>（ファイルの最後の行まで）を切り取りし

/wp-content/themes/new_theme/footer.php

を作成後、貼り付け。

index.php側の切り取った部分には、

<?php get_footer(); ?>

を置いておきます。

左右のどちらかにメニューがある場合は
メニュー部分のdivコンテナのみを切り取り

/wp-content/themes/new_theme/sidebar.php

に貼り付け、切り取った部分に

<?php get_sidebar(); ?>

を置いておきます。

切り分けが終わったら、WordPressで動作確認します。切り分ける前と同じ表示になっていればOKです。
これで、繰り返す部分をそれぞれのファイルに切り分けできました。

アイキャッチ画像を使えるようにfunctions.phpを準備

このままだと、アイキャッチ画像の設定がWPの編集画面に出てきませんので

/wp-content/themes/new_theme/functions.php

を新規作成し、

<?php
add_theme_support('post-thumbnails');
?>

add_theme_support() を追加します。

single.php、page.phpをindex.phpから複製して作成

ここまでくれば、もうほとんどテーマとしては出来ているので、あとは命名規則に従ってどんどんファイルを量産します。

//「記事」扱い表示のファイル
/wp-content/themes/new_theme/single.php

//「ページ」扱い表示のファイル
/wp-content/themes/new_theme/page.php

を、index.phpから複製して作成し、ループ部分を差し替えます。htmlですでに作ったものがあるなら、id,class,レイアウトなどを差し替えていきます。

■single.phpのループエリアサンプル

<?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
   
       <div class="post">
       
       <h1 class="title"><?php the_title(); ?></h1>
       <div class="blog_info contentsbox">
       <ul>
          <li class="cal"><?php the_time('Y/m/d') ?></li>
          <li class="cat"><?php the_category(', ') ?></li>
          <li class="tag"><?php the_tags('', ', '); ?></li>
       </ul>
       
       </div>
                             
       <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
                             
           <div class="thecontent">
           <?php the_content(); ?>
           </div>
       
         </div><!-- /.post -->
                        
                        
   <?php endwhile; ?>
                       
      <div class="nav-below">
         <span class="nav-previous"><?php previous_post_link('%link', '古い記事へ'); ?></span>
         <span class="nav-next"><?php next_post_link('%link', '新しい記事へ'); ?></span>
      </div><!-- /.nav-below -->

<!-- Commetns --> 
                    
  <?php else : ?>
                    
      <h2 class="title">記事が見つかりませんでした。</h2>
                    
  <?php endif; ?>

■page.phpのループエリアサンプル

<?php if (have_posts()) : ?>
  
  <?php while (have_posts()) : the_post(); ?>
  
    <div class="post">
    
      <h1 class="title"><?php the_title(); ?></h1>
                               
        <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
        <?php the_content(); ?>
    
    </div><!-- /.post -->
                        
                        
  <?php endwhile; ?>
                    
  <?php else : ?>
                    
     <h2 class="title">記事が見つかりませんでした。</h2>
                    
  <?php endif; ?>

他にもカテゴリーごとに表示をわけたい場合は、category-slug.phpなど、自由に作っていってください。

404.phpファイルをindex.phpから複製

404.php は、WPがデータを見つけられなかったときに自動で読み込むファイルなのでぜひ作りましょう。
ループエリアを消して、自由にレイアウトしてください。ルールはほとんど無いです。

//「404.php」の場所
/wp-content/themes/new_theme/404.php

☆

あとは、comments.phpやwidgetの設定もありますが、htmlベースのサイトで補助的にWPを使うなら最低限こんな感じかなとおもいます。
ベースのindex.phpさえ組み上げてしまえば、あとは表示したい情報を調整したり複製していくだけなので便利です。

ただ、大掛かりなWPサイトの場合は、テーマの作成に慣れていない方は既存のものからカスタマイズするほうがいいかもしれません。すでにきちんとHTMLで組まれているソースがあって、シンプルなWP補助を受けたいときにやってみてください。

ご参考にどうぞ。

関連記事