WordPressで作る企業・お店サイト » カスタマイズ:テーマ http://www.studioham.net 企業やお店で使えるビジネスサイト向けテーマ、プラグインを深く追求するサイト Tue, 09 Feb 2010 06:13:30 +0000 ja hourly 1 http://wordpress.org/?v=3.0 テーマのカスタマイズ：準備編 http://www.studioham.net/archives/804 http://www.studioham.net/archives/804#comments Fri, 29 Jan 2010 05:36:38 +0000 尾崎 卓治 http://www.studioham.net/?p=804 カスタマイズってスタイルシートの修正からPHPコードの変更まで対象は幅広くなります。この記事は大幅にカスタマイズしたいという希望者へのちょっと技術者よりのお話です。

WordPressには豊富なテーマが用意されています。WordPress管理からダウンロードできるもの以外にも世界中のデザイナーが用意したテーマがインターネット上に数えきれないくらい存在しています。

ユーザーとしては自分のサイトに合うものを選ぶのですが、有償の物を購入したとしても100%満足することはできないでしょう。どのレベルのユーザーにもカスタマイズの要望は出て来るでしょう。

では具体的にどのような手順でカスタマイズを進めていけばいいのかを考えてみたいと思います。

まだサイトを公開していない段階であれば悩む事はないのですが、WordPressで運用を始めているとカスタマイズ途中の物をお客様に見せる事になります。ただ、それは絶対NGというわけではありません。軽微なカスタマイズの場合はそれでも充分です。

実際にWordPressでサイトを公開中で、カスタマイズ途中の物を訪問者に見せたくない場合。
「リニューアルしました！」って言いたい場合です(笑)。

公開中のWordPressと別にテスト用のWordPressを立ち上げる必要があります。
大きく方法は二通りあります。

1)サーバーにもう一つWordPressを立ち上げる
サーバー上の容量、データベースに余裕があるなら、WordPressをもう一つ立ち上げてしまいましょう。
実際に動いているのですから、100%同じ環境でテストができます。

但しこの方法はCSSやHTMLを編集する程度の軽微なカスタマイズに限ります。
phpプログラムを修正する必要がある場合、この方法はおススメできません。
2)の方法をご検討ください。誤動作の可能性があるプログラムのテストを公開されているサーバーでするべきではないからです。

2)ご利用のPCにサーバー環境を作ってWordPressをテスト稼動させる。
サーバー環境の構築には専門知識が必要ですが、XAMPPという優れたアプリケーションがあります。
WindowsPCでもXAMPPをインストールすることでサーバー環境を構築できます。

少し敷居の高い話になりますが、こういう環境を用意しておけば、プラグインのカスタマイズにも便利です。

WordPressの本題から少し外れますが、「テーマのカスタマイズ：XAMPP」でXAMPPの導入についてご説明します。

]]> http://www.studioham.net/archives/804/feed 0 WordPressにGoogleAnalytics(アナリティクス)：導入編 ステップ2 WordPressのテーマにGoogleAnalytics用のタグを追加 http://www.studioham.net/archives/604 http://www.studioham.net/archives/604#comments Tue, 26 Jan 2010 08:00:16 +0000 尾崎 卓治 http://www.studioham.net/?p=604 WordPressにGoogleAnalytics(アナリティクス)：導入編 ステップ1 GoogleAnalyticsアカウントを作成の続きです。

取得したコードを解析するWebページのソースに加えます。
場所は</body>タグの直前と指示されています。

通常のサイトでは全てのWebページに手作業又は置換作業でコードを埋め込む事になりますが、WordPressの場合はテーマのテンプレート一ヶ所に埋め込むだけで終了します。

WordPress管理から外観>編集をクリック。
該当するテンプレートファイルを選択します。(多くの場合、footer.php)
</body>タグを探し出し、その直前に貼付けます。
コメントタグでくくって置くと修正したり、解析を停止するときに便利です。

テンプレートファイルに貼付け

専用コードはテンプレートに埋め込む方法以外にもプラグインを使う方法があります。
Google Analytics and Feedburner Reports plugin for WordPress
Ultimate Google Analytics
プラグインを使うメリットはテーマを変える度、テンプレートを修正する必要がない事です。

]]> http://www.studioham.net/archives/604/feed 0 WordPressにGoogleAnalytics(アナリティクス)：概要編 http://www.studioham.net/archives/584 http://www.studioham.net/archives/584#comments Tue, 26 Jan 2010 06:30:22 +0000 尾崎 卓治 http://www.studioham.net/?p=584 企業サイトやお店のサイトは商売の道具です。
当然、どのくらいアクセスがあるか……は気になるところです。

各ページにアクセスカウンターを設置する方法はご存知だと思いますが、最近のビジネスサイトでは表面的にカウントしない方法が主流です。これは「アクセスをカウントされていることを嫌う」という訪問者の心理を考慮しての事です。

そこでおススメなのが、GoogleAnalyticsです。
無料で利用できる高性能な解析ツールとして高い評価を得ています。

GoogleAnalyticsは解析するWebページに専用のタグを貼付ける作業が必要になります。
WordPressの場合はCMS機能でページを管理しているので簡単に導入が可能です。

となります。

各ステップ毎に別記事で詳しくご説明していますので、参考にしてください。

]]> http://www.studioham.net/archives/584/feed 0 固定ページをフロントページにすると….(4) http://www.studioham.net/archives/582 http://www.studioham.net/archives/582#comments Tue, 26 Jan 2010 05:53:15 +0000 尾崎 卓治 http://www.studioham.net/?p=582 固定ページをフロントページにすると….(1)
固定ページをフロントページにすると….(2)
とも関連するお話ですが、トップメニュー以外でもパン屑リストが影響する事に気がつきました。
これについても同様に解決する必要があります。

詳しくは後ほど追記します。

]]> http://www.studioham.net/archives/582/feed 0 WordPressテーマにSEOを加える http://www.studioham.net/archives/526 http://www.studioham.net/archives/526#comments Fri, 22 Jan 2010 01:41:52 +0000 尾崎 卓治 http://www.studioham.net/?p=526 WordPressでテーマファイルを変更する度にSEOへの対応をチェックして下さい。
というのが選択したテーマによってはメタタグの設定を加えた方が良いものがあります。

ホームページのソースを見て、<head>〜</head>間のmetaタグを調べます。
keyword、descriptionはありますか？無ければ追加しましょう。

keyword、descriptionは一昔前ほど重視されませんが、descriptionが検索エンジンの説明文で掲載されている場合もありますので記述しておいて損はありません。

<meta name="keywords" content="サイトのキーワードを半角カンマ区切り30文字程度">
<meta name="description" content="サイトの内容を文章で紹介80文字程度">

robotsに関してはあえて書かなくても良いというのが一般的です。
検索エンジンに載せたくない場合は必須タグという扱いです。
書くなら…..

<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords" content="サイトのキーワードを半角カンマ区切り30文字程度">
<meta name="description" content="サイトの内容を文章で紹介80文字程度">

となります。

編集場所はWordPress管理から「外観」→「編集」でヘッダー (header.php)を編集します。
上記のHTMLタグを<head>〜</head>の間に挿入します。

各文字数については、目安ですが極端に越えてしまうと効果が薄いようです。厳選して少ない文字数でサイトの特徴やキーワードを伝えた方が検索エンジンに採用されやすいように感じます。

]]> http://www.studioham.net/archives/526/feed 0 ビジネスサイトに相応しいテーマ選びとは？ http://www.studioham.net/archives/437 http://www.studioham.net/archives/437#comments Thu, 21 Jan 2010 04:48:08 +0000 尾崎 卓治 http://www.studioham.net/?p=437 WordPressでビジネスサイトを作る場合、テーマ選びにも配慮が要ります。

気をつけたいのは通常のサイトにも言えることですが、
検索エンジンからの訪問者がひと目で何のサイトか解ること！
というのが重要になります。

以下は私が普段、取引先にアドバイスしている事です。

1)ヘッダーデザインに画像が使われている。
商品やサービスが解りやすいものである場合、商品やサービスそのものをヘッダー画像に入れてしまえば「一目で何屋さんか」「何についてのサイトなのか」は閲覧者に伝えることができます。
テーマのヘッダーデザインに画像が使われている場合はテーマのHTMLやスタイルシートを編集することなく画像を入れ替えるだけでカスタマイズができます。

2)ヘッダー下又はサイドバー上部に固定ページのリンクがレイアウトされています。
同様の理由で、ページの上部に固定ページへのメニューがあればサイトの内容を想像していただく事ができます。一瞬で沢山の情報を得ていただくには固定ページへのリンク位置も重要になります。

3)白又は淡色ベースのデザイン。
黒や濃色ベースに白文字というデザインはシャープな印象を与えますが文字が読みにくいのものです。
デザインではなく中身で勝負するなら、可読性の高い白(淡色)ベースに黒文字のデザインを選びましょう。

4)なるべくシンプルなデザイン。
目立つテーマはあなたの仕事内容を隠してしまう事があります。
シンプルなデザインの方がロゴやタイトルを引き立てます。

]]> http://www.studioham.net/archives/437/feed 0 固定ページをフロントページにすると….(2) http://www.studioham.net/archives/421 http://www.studioham.net/archives/421#comments Wed, 20 Jan 2010 06:56:30 +0000 尾崎 卓治 http://www.studioham.net/?p=421 固定ページリンクに加えられている「HOME」というリンク。
フロントページを固定ページにした場合、二重にINDEXページへのリンクが表示されていまいますので対応が必要だという話の続きです。
前回の記事「固定ページをフロントページにすると….(1)」

この表示を隠すにはテーマのテンプレートを編集する必要があります。

「外観」→「編集」を開きヘッダーにある場合はheader.php、サイドバーにある場合はsidebar.phpを修正します。(ファイル名はテーマによって異なる場合があります。)

下記例の様にHOMEに固定リンクされているHTMLをコメント化しておけば表示は見えなくなります。

修正前

<div id="header">
	<div id="headertxt">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
	</div>
	<div id="navigation">
		<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
		<?php wp_list_pages('title_li=' ); ?>
	</div>
</div>

修正後

<div id="header">
	<div id="headertxt">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
	</div>
	<div id="navigation">
<!--Homeへの固定リンクをコメント化
		<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
-->
		<?php wp_list_pages('title_li=' ); ?>
	</div>
</div>
]]> http://www.studioham.net/archives/421/feed 0 固定ページをフロントページにすると….(1) http://www.studioham.net/archives/292 http://www.studioham.net/archives/292#comments Sun, 17 Jan 2010 01:52:32 +0000 尾崎 卓治 http://www.studioham.net/?p=292 WordPressでビジネスサイトを構築する場合、フロントページは時系列にならぶブログより固定ページで作り込みたいと思います。

これは設定→表示設定に機能がありますのでWordPress機能で実現します。

ところが固定ページをフロントページに設定すると困った事が起きます。
テンプレートによってはメニューのHOMEとフロントページへの固定リンクが出てしまうのです。
(というかそうなっているテーマが多い)下記例ではホームという固定ページを制作して、「設定」→「表示設定」でフロントページに指定しています。ご覧の様にホームという表示が二つ並んでしまいどちらも同じページへのリンクとなってしまいます。

ホーム表示が二重になる例

ホーム表示がないテーマを選ぶ事が一番容易な選択肢になります。
ただし、これだとテーマの選択肢がかなり少なくなります。

ベストの案はテーマファイルを編集してhomeという表示を出さなくする方法でしょう。
これについては少し研究してみますので、解決次第お話したいと思います。

]]> http://www.studioham.net/archives/292/feed 0