Home > スポンサー広告 > 既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/173-7216467a
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順

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

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

  • vanillate
  • 2015-08-17 Mon 16:32:17
  • wordpress
wp_ss.jpg

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 には、下記を1行目〜に追加します。
/*
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のヘッダー部分(ファイルの1行目〜ヘッダー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補助を受けたいときにやってみてください。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/173-7216467a
Listed below are links to weblogs that reference
既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順 from バニデザノート

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

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。