新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ワードプレス(WordPress)でトップページをデザインする方法 #wp

      2014/11/09

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

さて、テーマのコピーが用意できたらそれを自分のデザインに当てはめていかなければなりません。
まずは、トップページから始めましょう。

トップページをデザインするにあたり、使用しているテーマのホームテンプレートを探さなければなりません。
ホームテンプレートと勝手に名付けていますが、つまりはトップページのテンプレートのこと。
通常のWebサイトであれば「index.html」ファイルがディレクトリ内にあれば、ディレクトリ表記で「index.html」が表示されるように出来ていますが、その「index.html」に当たるファイル(テンプレート)のことをいっています。

WordPressで作ったプロット・ファクトリートップ
とりあえずこんな感じになりました。

スポンサーリンク
 

それがWordPress(ワードプレス)の場合は以下のようになっているようです。
テンプレート階層 – WordPress Codex 日本語版

訪問者がサイトのメインページ(ホームページ)にアクセスした場合、WordPress はまず最初に、静的フロントページかどうかを判断します。静的フロントページが設定されている場合、固定ページのテンプレート階層に従ってテンプレートを読み込みます。設定されていなければ、次の順にテンプレートファイル名を探し、最初に見つかったテンプレートを使ってページを生成します。

  1. home.php
  2. index.php

とりあえずここでは「静的フロントページ」云々は置いておきます。
今回使ったテーマの元になっているのは「Twenty Ten」。
「Twenty Ten」の場合はindex.phpがホームテンプレートに当たります。

といったところでまずは「index.php」をのぞいてみるとこんな感じ。(コメント省略)

<?php get_header(); ?>
 
<div id=”container”>
  
<div id=”content” role=”main”>
   
<?php
   get_template_part( ‘loop’, ‘index’ );
   ?>
  
</div><!– #content –>
 
</div><!– #container –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

これを自分のサイトのデザインに合わせて書き換えていくわけですが、ここで、当初のデザインがしっかりできているかが効いてきます。
しっかりとSEOコーディングできていればそんなに難しくはないです。

ちなみに自分の場合は以下のように書き換えました。

<?php get_header(); ?>
 
<div id=”naiyo”>
  
<div id=”flashcontents”>
  
※中略(Flash)
  
</div>
  
<div id=”info”>
  
<h3>インフォメーション</h3>
  
<dl>
   
<?php
   
get_template_part( ‘loop’, ‘index’ );
   
?>
  
</dl>
  
</div>
  
<div id=”news”>
  
※中略(カレンダー)
  
</div>
 
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

インフォメーションの部分に新着記事が来るようになっています。
中略部分はそれぞれトップにおかれていたコンテンツ(Flash等)が入ります。

これでひとまずトップページのコンテンツ部分を埋めることができました。
次はそれぞれ「get_header();」「get_sidebar();」「get_footer();」で呼び出すことのできる部分をカスタマイズします。

それぞれ「get_header();」で呼び出すヘッダー部は「header.php」。
「get_sidebar();」で呼び出すサイドバーは「sidebar.php」。
「get_footer();」で呼び出すフッター部は「footer.php」となっています。

今回は作ったデザインHTMLをドーンとコピーして、旧テンプレから一部プログラム、及び変数を(タイトル等)もってくることにしました。

以下、できたもの。
 
□ header.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />
<title>
※中略(「twentyten」のオリジナルからコピー)
</title>
<meta name=”Description” content=”埼玉県熊谷市のパソコン教室。ホームページの制作、フラッシュの作成が出来るようになります。” />
<meta name=”Keywords” content=”パソコン教室,埼玉,パソコン,ホームページ制作,ホームページ,ホームページ作成” />
<script language=”JavaScript” type=”text/javascript” src=”cssjs/swfobject.js”></script>
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<script type=”text/javascript”>
※中略(Google Analytics用のソース)
</script>
</head>
<body>
<div id=”body”>
 
<div id=”header”>
  
<h1>埼玉県熊谷市のホームページ制作を教えるパソコン教室</h1>
  
<p id=”key”>現役<em>Webディレクター</em>(元<em>Webデザイナー</em>)が教える<strong>パソコン教室</strong>。<em>DTP</em>及び<em>Web</em>アプリケーション対応。<strong>ホームページ制作</strong>、<strong>Webコンサルティング</strong>も。</p>
  
<ul>
   
<li><a href=”greeting.html”>ご挨拶</a></li>
   
<li><a href=”outline.html”>概要</a></li>
   
<li><a href=”history.html”>沿革</a></li>
   
<li><a href=”service.html”>サービス</a></li>
   
<li><a href=”price.html”>料金</a></li>
   
<li><a href=”access.html”>アクセス</a></li>
   
<li><a href=”recruit.html”>人材募集</a></li>
   
<li><a href=”https://plotfactory.sakura.ne.jp/form/form.html”>お問合せ</a></li>
  
</ul>
 
</div>
 
<div id=”main”>

タイトルとCSSの場所のみオリジナルのプログラム使っています。

タイトルは見直す必要ありそう。

□ sidebar.php

 <div id=”memu”>
 <ul>
  <li id=”introduction”><a href=”coach/introduction.html”>これからパソコンを始めたい方―パソコン導入サービス</a></li>
  <li id=”web_d”><a href=”web/”>ホームページを持ちたい方―ホームページ制作</a></li>
  <li id=”truble”><a href=”rescue/”>パソコンで困っている方―パソコンレスキュー [お電話一本すぐに解決!!]</a></li>
  <li id=”coach”><a href=”coach/”>パソコン教室のご案内 [出張講習・マンツーマン指導]</a></li>
 </ul>
 <p id=”blog”><a href=”http://webdirector.livedoor.biz/” target=”_blank”>代表ブログ – ちほちゅう</a></p>
  <div align=”center”>
  ※中略(広告等)
  </div>
 </div>
</div>

ここはもう面倒くさいのでダイレクトにメニュー部分をコピペしてしまいました。
最終的にはトップ用とコンテンツ用及びブログ用とで分けたほうがいいかもしれませんがとりあえず今はこれで。

□ footer.php

<div id=”footer”>
   
<div align=”center”><a href=”greeting.html”>ご挨拶</a> | <a href=”outline.html”>概要</a> | <a href=”history.html”>沿革</a> | <a href=”service.html”>サービス</a> | <a href=”price.html”>料金</a> | <a href=”access.html”>アクセス</a> | <a href=”recruit.html”>人材募集</a> | <a href=”web/introduction.html”>パソコン導入</a> | <a href=”web/”>ホームページ制作</a> | <a href=”rescue/”>パソコンレスキュー</a> | <a href=”coach/”>パソコン教室</a> | <a href=”https://plotfactory.sakura.ne.jp/form/form.html”>お問合せ</a> | <a href=”/”>トップページ</a></div>
   
<div id=”etc”> <a href=”sitemap.html”>[サイトマップ]</a> <a href=”guideline.html”>[ガイドライン]</a> <a href=”links/”>[リンクス]</a> <a href=”m/”>[モバイル]</a> <span class=”hidden”><a href=”sitemap.xml”>sitemap</a></span></div>
   
<div id=”copyright”><a href=”http://www.plot-factory.com/”>パソコン教室</a> <a href=”http://www.plot-factory.com/”>ホームページ制作</a>のPLOT-FACTORY (C) 2007 <a href=”http://www.plot-factory.com/”>PLOT-FACTORY</a></div>
  
</div>
</div>
<script type=”text/javascript”>
※中略(色々スクリプト、あとで整理する)
</script>
</body>
</html>

ここも面倒なのでダイレクトにコピペ。
過去に無料でやってくれるというので張っていたSEO用ソースはウザイので取りました。
これでHTML関係は出来上がり。

最後に、画像やjavascript等の外部データをサーバーにアップ。
場所をちゃんと指定し直してあげると、とりあえずトップページのみ完成です。

(今回は「images(イメージフォルダ)」を「wordpress/wp-content/themes内」及び「wordpress内」、
「cssjs(Javascriptフォルダ)」を「wordpress内」にアップすることでトップページが正常に見れるようになりました。
「images(イメージフォルダ)」がダブっちゃったりしてるので後日、場所を変える予定)

なお、上記「header.php」「sidebar.php」「footer.php」のみカスタマイズしてトップページのコンテンツを「固定ページ」として設定することも可能です。

フロントページの設定
これがおそらく「静的フロントページ」のことなのでしょう。

 - CMS, WordPress, デザイン, プログラミング , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Flickr(フリッカー)リニューアル後、set画面からスライドショーの埋め込みソースが取得できなくなった

1年以上前の記事です。内容が古い可能性があります。Flickr(フリッカー)リニ …

no image
稼働中のシステムのバグ取り(EC-CUBE)

1年以上前の記事です。内容が古い可能性があります。すでに稼働中のシステムにバグ※ …

クラスは自作できる(ActionScript3.0勉強中! #4)

1年以上前の記事です。内容が古い可能性があります。「オブジェクト指向プログラミン …

no image
Flashの時間稼ぎスクリプト

1年以上前の記事です。内容が古い可能性があります。Flashを編集していて、この …

Googleに勧められたのでテキスト広告だけじゃなくイメージ広告も表示させるようにした

1年以上前の記事です。内容が古い可能性があります。先日、「Google AdSe …

no image
JavaScriptでありがちな9つのシマッタ

1年以上前の記事です。内容が古い可能性があります。「JavaScriptでありが …

livedoorプロフィールの拍手機能をつけてみた

1年以上前の記事です。内容が古い可能性があります。livedoor プロフィール …

SNS(ソーシャルネットワークサービス)のプロフィール写真の服は赤がモテる

1年以上前の記事です。内容が古い可能性があります。青い色は信頼、誠実を感じる。赤 …

「All in one SEO Pack」を入れて最初の設定【WordPressプラグイン】

1年以上前の記事です。内容が古い可能性があります。当ブログ、あまりSEOに関して …

ワードプレス(WordPress)でリンクURLを一気に検索置換、プラグイン「Search Regex」がすばらしい

1年以上前の記事です。内容が古い可能性があります。ブログを「livedoor B …

血液型オヤジ