DOE HOME > Web技術Tips > WordPress > WordPressをCMSとして利用するホームページの構築手順

category_02_m

WordPressをCMSとして利用するホームページの構築手順

Pocket

WordPressをブログツールとしてではなく、CMSとして利用することはよくあると思います。その際、基本的に抑えておきたい流れをまとめました。

 

まずは通常のホームページと同様に静的ページをDreamweaverで作る

Dreamweaverでなくてもかまいませんが、使い慣れたエディターで、通常のホームページを作るのと同じ感覚でまずはコーディングしておきます。

ローカルの適当な場所にテーマ用のフォルダを作る

例)/テーマ用ファイル/

テーマに必須なファイルを用意する

最低限次のファイル、フォルダがあればテーマは使用可能になります。

  • index.php
  • style.css
  • imagesフォルダ
  • screenshot.png

・index.php

とりあえずは上記で作成した静的なファイル【index.html】をそのままコピーしておいて拡張子だけ.phpに変えても問題ありません。

・style.css

テーマの名前は必須です。あとは省略してOK。

@charset "utf-8";

/*
Theme Name: ◯◯サイト
Theme URI: http://www.example.com/
Description: ◯◯なサイトです
Author: DOE
*/

これらのファイルがそろったら早速UPします。

「設定」メニューから各種設定をする

「サイトアドレス」を変更したい場合

希望のURLをつくって設定を保存

例えば「test」フォルダをサイトのルートとして設定したい場合は、まずFTPで実際にtestフォルダを作ります。

その中に以下ファイルをUPします。

【wpフォルダの中にあるindex.php】

ダウンロードしてパスを書き換える

例)

require('./wp-blog-header.php');
↓
require('../wp/wp-blog-header.php');

※パーマリンクの設定をしている場合は.htaccessも変更してtestフォルダへUP

ちなみにパーマリンクの設定はSEOを踏まえると以下がオススメらしい

/%category%/%post_id%/

header.phpなどに分割していく

先程作ったindex.phpをヘッダー、フッター等、パーツに分解していきます。
(注意)wp_head();とwp_footer();は基本的には入れます。

入れないとプラグインが正常に動作しなかったりします。

テンプレートの中で使用する画像へのパス、HTMLページヘのリンクパスの考え方

テンプレ化する前の静的ページのコーディングが例えば

<img src=share/logo.gif />

だった場合は、基本、テンプレートでのパスは

<img src=<?php bloginfo('url'); ?>/share/logo.gif />

とすればOK。
こうしておけばもしサイトのルートのパスを変更しても自動的に対応出来ます。

ただし、ブログトップ=サイトトップと決まっている場合は

<img src=/share/logo.gif />

でも特に問題はありません。

なぜなら、ブログが格納されているディレクトリ名を気にする必要がないからです。

ブログ一式が全く別のデザインで、例えばトップ配下にexample_blogという名前であったとしたら

サイトルートパス(スラッシュから始まるパス)は使えません。また、ディレクトリ名が変更になった場合も困るので、なるべく上記のPHPコードに差し替えた方が良いと思います。

ウィジェットを使うならfunctions.phpの設定

・ウィジェットを挿入する箇所にテンプレートタグ挿入します。

その他必要に応じてarchive.phpやhome.phpを作っていく

テンプレート階層をうまく利用して、各種ページの振り分けを自動で行うために、必要に応じてarchive.php等追加していきます。ただし、ここは判断に悩む所で、わざわざ専用のテンプレートファイルを作成せず、PHPの条件分岐でトップとアーカイブページを分割するなどの工夫をしたほうが管理が楽なことも多々あるので臨機応変に考える必要があります。

トップページを固定ページ+新着情報追加、にしたい場合

  • 管理画面の「設定」「表示設定」から固定ページを選択
  • フロントページにしたい記事を選択
  • トップページが固定になるので、その代わりとなる記事一覧のページを「投稿ページ」で選択
    ※記事一覧なのに固定ページを選択するのは気持ちが悪いけど、それで良いみたい。
    ※「投稿ページ」で選択した固定ページの本文は空っぽでOK
  • トップページ用の固定ページを新規に作成したら、管理画面右側の「ページ属性」からテンプレートを選択する。
    ※注意)まだトップページ用テンプレート(=固定ページ用 例:xxx_top.php)がアップされていないと「ページ属性」が表示されない。
  • トップページ用のテンプレートには以下の様な記述をする
    <例>
<?php
/*
Template Name: ◯◯TOPページ
*/
?>
<table class="News">
<?php $my_query = new WP_Query('posts_per_page=5'); ?>
<?php if ($my_query->have_posts()) : ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
	<tr>
		<th><?php echo get_the_date(); ?></th>
		<td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
	</tr>
<?php endwhile; ?>
<?php endif; ?>

<?php wp_reset_postdata(); ?>
</table>
<p class="tright xl-margin">» <a href="<?php bloginfo('url'); ?>/blogtop/">過去のトピックス一覧を見る</a></p>

※上記で使用しているWP_Query()に関してはこちらのホームページのスニペットが便利でした。

http://notnil-creative.com/blog/archives/1288

メディア設定で画像の挿入サイズの数値設定する

・特に大サイズをコンテンツ幅いっぱいにできるように

・どこかのタイミングでファイルをアップすると、ここで設定されているサイズに従い

サムネイル、中サイズ、大サイズの画像が自動で生成される。

※注意)途中でこの値の設定を変えても過去の写真は生成されない!

ただしそれを可能にするプラグインがあったかも。

・それぞれのサイズの写真は以下のようにして設定できる。

wp_get_attachment_image($attachment_id,'medium')

・設定で仮に付けておいたメールアドレスの変更

・1ページの記事表示件数が5件だった場合、5件以上登録して「次へ」のリンクが表示されるかチェックする

404エラーページを作る

404エラーページを作っていないと、誤ったURLを打ち込んだ時にテンプレート階層に従いindex.phpが表示されるので、意外とエラーページが表示されているということに気づかないことがあります・・・。

ビジュアルエディタでスタイルを選べるように設定する

Tiny MCE等で、自分で作ったスタイルシートを設定することができます。
詳細は別ページ。

ビジュアルエディタと実際の表示を合わせる

 上記で設定したスタイルシートも含め、エディタ上で、実際のスタイルを再現することができます。お客様に使ってもらう場合は非常に便利です。

その他、必要に応じて設定

  • SEO対策(all in one seo packなど)
    descriptionなど重複していないかチェック
  • search.phpをカスタマイズ
  • ソーシャルブックマークなどの設定
    「JetPack」プラグインの「共有」が便利ですが、はてなブックマークやEvernoteはデフォルトで設定されていないので下記設定を行う。
    <はてな>
    共有URL→ http://b.hatena.ne.jp/bookmarklet?url=%post_url%&btitle=%post_title%
    アイコンURL→ http://b.st-hatena.com/images/entry-button/button-only.gif<Evernote>
    共有 URL→ http://www.evernote.com/clip.action?url=%post_url%&title=%post_title%
    アイコン URL→ http://www.evernote.com/favicon.ico
Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. 無料で使える明朝体の日本語WEBフォント
  2. Google Mapがエラーで表示されなくなった場合の直し方
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. カスタムタクソノミー一覧を任意の順番にソートする方法
  5. 無料エディター『Brackets』で快適コーディング

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。