WorPressテーマのご利用方法(テーマご購入のお客様向け)

2010-10-06

インタープレインウェブデザインのWordPressテーマをご購入いただきまして誠にありがとうございます。
本テーマはビジネスサイトに最適化した仕様でWordPress導入時の工数削減、またはカスタマイズのベースとなることを目的として制作いたしました。ご利用に際しては下記のとおりご案内いたしますのでどうぞご覧ください。記述内容はWordPress 3.0.1に基づいています。(2010/10/1現在)

1. 利用規約

当サイトに掲載の「特定商取引に基づく表示」内容に準じます。

http://www.inter-plain.com/tokutei/

ライセンス:

GNU GPNに準じます。

http://wpdocs.sourceforge.jp/License

http://www.gnu.org/home.ja.html

改編・複製について:

構成されているパッケージ内容各ファイルの改編及び複製は自由に行っていただいて結構です。

免責事項について:

  • 当方は本テーマのご利用に起因して被ったいかなる損害に対しても責任を負いません。
  • 当方は本テーマに不備があっても、訂正する義務は負わないものとします。
  • 当方はPHP、HTML、CSS、プラグインなどに関して技術的役務を提供する義務は負いません。

2. パッケージ内容

zip形式の圧縮ファイルを解凍すると以下のファイルが含まれます。

  • テーマ本体ディレクトリ(例:/interplain-hg01)
  • PSDフォルダ(psdファイル)
  • Contact Form 7 設定用サンプルテキスト
  • WordPress テーマのご利用について(本PDFファイル)

3. ご利用の手順

  1. WordPressをインストールします。
  2. WordPress テーマをテーマディレクトリにアップロードします。
    (WordPressを/wpフォルダにインストールした場合 /wp/wp-contents/theme/)
  3. アップロードしたテーマを有効にします。(ダッシュボード > 外観 )
  4. 下記プラグインをインストールします。
    WP Pagenavi、Breadcrumb NavXT
    ダッシュボード>プラグイン>新規追加>
    上記プラグイン名を入力し検索>今すぐインストール>プラグインの有効化
    その他のプラグインは必要に応じてインストールしてください。
    当方のWordPress制作プランで使用するプラグインはこちら>>
  5. WordPressの各種設定を行います(。ダッシュボード>設定)
    パーマリンク設定は「日付と投稿名」or「月と投稿名」としておきます。
  6. 下記のカテゴリを作成します。カテゴリ名は任意で構いませんがスラッグは記載の通りにしてください。
    カテゴリ名:Introduction (スラッグ:intro)
    カテゴリ名:お知らせ  (スラッグ:info)
    カテゴリ名:トピックス  (スラッグ:topix)
    ※VG01は不要
    カテゴリ名:add(スラッグ:add)※SD01のみ
  7. その他任意で作成してください。
  8. ページ(page)を作成します。お問い合わせページはスラッグを「contact」に、サービス紹介ページはスラッグを「service」として作成してください。ページの並び順はページ属性の「順序」の数値を基準に昇順(数字の小さい方から)となります。
  9. 上記手順でデモサイトと同じものが作成できます。その他各部は以下参照ください。

トップページ

トップページ

①キャッチフレーズ

ダッシュボード > 設定 > 一般 > 「キャッチフレーズ」で設定した内容が表示されます。

②ロゴエリア

デフォルトサイズは220px-40px。PSDファイル(site-id.psd)を同梱していますので適宜編集または入れ替えてください。site-id.psdからの保存する場合site-id.pngで保存してください。
サイズ変更の際はheader.php 45行目付近のimgタグ内を適宜修正してください。

<div id="site-id">
<h1><a href="<?php echo get_option('home'); ?>/" >
<img src="<?php bloginfo('template_directory'); ?>/images/site-id.png"  width="220" height="40" alt="<?php bloginfo('name'); ?>" /> </a></h1>
</div>

もしロゴを使用せずにテキストにてサイト名を表示する場合は下記コードと差し替えてください。

<div id="site-id">
<h1><a href="<?php bloginfo('url'); ?>/" > <?php bloginfo('name'); ?> </a></h1>
</div>
③電話番号エリア

PSDファイル(tel.psd)を編集してください。tel.psdからの保存する場合tel.pngで保存してください。デフォルトサイズは223px-28px。
サイズ変更の際はheader.php 48行目付近のimgタグ内を適宜修正してください。

<div id="header-box">
<div id="tel"><img src="<?php bloginfo('template_directory'); ?>/images/tel.png"  width="223" height="28" alt="電話番号" />
</div>
④トップ画像エリア

デフォルトでは5枚の画像(860px-200px)をランダム表示します。画像を変更するにはPSDファイル(mainpic.psd)を編集していただくか、テーマディレクトリ/images内のmainpic01~05.jpgを上書き保存してください。画像サイズを変更する場合にはheader.php 66行目付近のjavascript内の記述を変更してください。
画像にリンクを貼る場合、末尾記載のコード参照してください。

document.write("<img src='"+img[n]+"' border='0' width='860' height='200'>");
⑤グローバルナビゲーション

デフォルトでは「page」で設定したものが表示されます。exludeによって特定のページを除外する設定にしています。
特定のページを除外するには、header.php 86行目付近 exlude=に続いてカンマ区切りでページIDを記述します。

<?php wp_list_pages('sort_column=menu_order&title_li=&exclude=20,30,50&depth='); ?>

グローバルナビゲーションには第2階層以下ドロップダウンメニューを表示しますのでdepthの値は空欄にします。
項目が増え一行に収まりきれなくなると下段に表示されますが、レイアウトを崩しますので表示する内容、または階層にご注意下さい。

⑥投稿表示エリア(Introduction)

このエリアにはカテゴリ「introduction(スラッグ:intro)」に属する投稿を1件表示します。
基本的に1件表示でのご利用を想定していますが、表示件数を変更するには、index.php 8行目付近のposts_per_pages=の数値を任意で設定します。

<?php if (have_posts()) : query_posts('category_name=intro&posts_per_page=1'); ?>
⑦投稿表示エリア(What’s NewまたはInformation)

このエリアにはカテゴリ「お知らせ(スラッグ:info)」に属する投稿を10件表示します。
表示内容を変更するには、index.php 24行目付近のquery_postsの内容を変更します。
デフォルトでは

<?php if (have_posts()) :  query_posts('category_name=info&posts_per_page=10'); ?>

としていますが、任意のカテゴリを表示させるには下記コードを参照ください。

複数の特定のカテゴリを含めない場合
<?php if (have_posts()) :  query_posts(array('category__not_in' => array(3,4))); ?>
複数のカテゴリを表示する場合
<?php if (have_posts()) :  query_posts(array('category__in' => array(3,4))); ?>
⑧サイドバー バナーエリア

sidebar.php 3行目付近に下記の記述があります。
お問い合わせページ(スラッグ:contact)、サービス案内ページ(スラッグ:service)としてpage作成することでリンクが有効になります。(パーマリンク設定:「日付と投稿名」or「月と投稿名」)

<div id="sidebar-pr">
<a href="<?php bloginfo('url'); ?>/contact/">
<img src="<?php bloginfo('template_directory'); ?>/images/bnr-contact.gif"  width="220" height="75" alt="お問い合わせ" />
</a><a href="<?php bloginfo('url'); ?>/service/">
<img src="<?php bloginfo('template_directory'); ?>/images/bnr-service.gif"  width="220" height="75" alt="サービス" />
</a></div>

バナーサイズは220px-75pxです。
PSDファイル同梱ですので色調を変えるには、
bnr-contact.psd(お問い合わせ)、bnr-service.psd(サービス)を編集してください。

⑨サイドバー メニューエリア

sidebar.php 8行目付近に下記の記述があります。
デフォルトではカテゴリ、pageともすべて表示されるようになっており、また特定のpageやカテゴリを除外するexcludeを記述しています。
必要に応じてIDを記述してください。(特定のpageまたはカテゴリを表示するには&include=ID,ID,ID)

<div>
<ul>
<?php wp_list_categories('show_count=1&orderby=ID&exclude=&title_li=<h3>' . __('トピックス') . '</h3>') ?>
<?php wp_list_pages('sort_column=menu_order&title_li=<h3>ご案内</h3>&exclude=' ); ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?>
</ul>
</div>
⑩フッター メニュー

footer.php 10行目付近に下記の記述があります。
page表示項目はinclude=以降にカンマ区切りでページIDを記述します。
<?php wp_list_pages(‘sort_column=menu_order&title_li=&depth=1&include=’); ?>

⑪フッター コピーライト表示エリア

デフォルトでは「サイトのタイトル」が表示されます。英語表記など任意で表示するにはfooter.php 19行目付近の<?php bloginfo(‘name’); ?>を削除してaaabbccc.,co.ltdなどを記述します。

Copyright &copy;<?php the_date('Y'); ?> <?php bloginfo('name'); ?>. All Rights Reserved.

アーカイブページ

アーカイブページに表示される投稿の件数は、ダッシュボード>設定>表示設定で設定した表示件数となります。

ページ(page)

お問い合わせへバー表示エリア

お問い合わせへ誘導する「コンタクトバー」の表示は条件分岐によって表示するページとしないページを動的に切り替えます。
page.php 33行目付近

<?php if(is_page('contact')){ ?>
<?php } else { ?>
<?php include (TEMPLATEPATH . '/add-contact.php'); ?>
<?php } ?>

表示しないページのページスラッグ(またはID)をis_page(”)の”内に記述。複数設定する場合、「|」で区切る。

条件分岐の詳細はCODEX下記URLを参照してください。
http://wpdocs.sourceforge.jp/Conditional_Tags

またコンタクトバーからお問い合わせページへのリンクはadd-contact.php内の下記記述になりますが、サイドバーバナーエリアと同じ要領になります。お問い合わせページはスラッグをcontactとしてください。(パーマリンク設定:「日付と投稿名」or「月と投稿名」)

コンタクトバーの画像の色を変更するにはcontact-bar.psdを編集してください。

<div id="contact-box">
<p>まずはお気軽にご相談ください。</p>
<a href="<?php bloginfo('url'); ?>/contact/" >
<img src="<?php bloginfo('template_directory'); ?>/images/contact-bar.png" border="0" alt="お問い合わせはこちら" width="630" height="60" />
</a>
</div>
Google Analytics トラッキングコードの挿入

Google Analytics ご利用の際には、tracking.php にトラッキングコードを記述してください。
トラッキングコードを挿入するプラグインも様々なものがリリースされていますが、このWordPressテーマではシンプルにtracking.phpをインクルードするる方法をとっています。

4. 付属資料


▼トップページランダム画像にリンクを貼る場合のコードサンプル

<script language="javascript">
<!--
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.yahoo.co.jp/";
jmp[1] = "http://bb.yahoo.co.jp/";
jmp[2] = "http://www.yahoo.co.jp/";
jmp[3] = "http://auctions.yahoo.co.jp/";
jmp[4] = "http://aeu.jp/cs/";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img0.jpg";
img[1] = "img/img1.jpg";
img[2] = "img/img2.jpg";
img[3] = "img/img3.jpg";
img[4] = "img/img4.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
//-->
</script>

改編履歴:

2009/12/28 初版
2010/10/01 改定