トップページに新着記事を表示させることができると見た目がよくなるだけでなくユーザーにとっても便利になると思います。WPサイトビズで配布しているテーマはほとんどがトップページに新着記事表示のスペースがありますが特定カテゴリではなく新しい記事を表示させる設定になっています。

このサイトのトップページでは、2つの特定カテゴリを表示させています。今回はサンプルとしてWPサイトビズで使用しているソースコードをそのまま公開させていただきますがテーマによって調整が必要ですのでご注意ください。
※このサイトと同じ構成のテーマ対象です。

編集するファイルはメインインデックスのテンプレート (index.php)です。
※不動産プラグイン専用テーマは(home.php)です。
 

変更する箇所は以下のコードの場所です。

<div class=”box02_right”>
<h3>新着情報一覧</h3>
<div class=”dl_list”>

<?php query_posts(‘showposts=10’); ?>
<?php if (have_posts()):while(have_posts()):the_post(); ?>
<dl><dt><?php the_time(‘Y.n.j’); ?></dt>
<dd><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title_attribute(); ?></a></dd></dl>
<?php endwhile; endif; ?>
<div class=”btn_s”><a href=”category/info”>＞＞新着情報一覧はコチラ</a></div>
</div>
</div>

以下のコードに変更します

<div class=”box02_right”>
<div class=”dl_list”>
<h3>プラグイン＆カスタマイズ 新着情報一覧</h3>
<?php
$posts = get_posts(‘numberposts=5&category=21’);/* 5が表示させる記事数です。21がカテゴリIDです */
global $post;
?>
<?php
if($posts): foreach($posts as $post): setup_postdata($post); ?>
<dl><dt><?php the_time(‘Y.n.j’); ?></dt>
<dd><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title_attribute(); ?></a></dd></dl>
<?php endforeach; endif; ?>
</div>
</div>

<div class=”box02_right”>
<div class=”dl_list”>
<h3>Wordpressテーマ 新着情報一覧</h3>
<?php
$posts = get_posts(‘numberposts=6&category=1’);
global $post;
?>
<?php
if($posts): foreach($posts as $post): setup_postdata($post); ?>
<dl><dt><?php the_time(‘Y.n.j’); ?></dt>
<dd><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title_attribute(); ?></a></dd></dl>
<?php endforeach; endif; ?>
</div>
</div>

h3の文章は好みの文章に変更してください。box02_rightのコードは右による設定ですのでbox02_rightを抜くと下記のようになります。

テーマをWordPressビジネス用テンプレートセット001からWordPressビジネス用テンプレートセット004に変更しました。大幅に変更を行いましたが今回のリニューアルはクリーン&ミニマルな雰囲気にしたかったのでCSSでボタンと検索窓、パーツなど角丸にしました！下記はリニューアル後の全体画面です。

全体画面

変更点

※変更後のコードは参考までに一部公開しますがIEは基本的に無視していますのでご利用にはご注意ください。
ご存知だと思いますがIEだと角丸など表示できません。

h3

H3はこのように変更しました

下から上へのグラデーションです。まったく目立たない存在感です。

blockquote(引用)

blockquoteはこのように変更しました。下のほうが色が濃ゆくだんだん上にいくにつれてうすくなるというグラデーションです。角は丸くしてありますがIE7とかだと普通に丸くなりません・・・ソースコードは以下です。radiusの5pxの箇所で角のラウンドを調整できます。fafafaからfffへのグラデーションです。上記のh3もこのソースコードが使えます。

blockquote { padding-top: 17px;
padding-right: 17px;
padding-bottom: 17px;
padding-left: 17px;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
background: -moz-linear-gradient(top, #fff, #fafafa);
background: -o-linear-gradient(top, #fff, #fafafa);
border: 1px solid #E3E3E3;}
blockquote p { margin:0 0 5px 0; }

検索窓と検索ボタン

検索窓に影をつけてボタンにマウスをのせると色が変わるようにしました。

 

Htmlソースコードサンプル

<form id=”searchform” action=”http://●●/” method=”get”>
<div><input id=”s” type=”text” name=”s” value=”” />
<input id=”searchsubmit” type=”submit” value=”検索” /></div>
</form>

CSSソースコードサンプル

input[type=”text”], textarea {
padding: 4px;
background: whiteSmoke;
border: 1px solid #BFBFBF;
box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #828282;
}
#searchsubmit:hover {
background-color: #777;
}
#searchsubmit {
border: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #4B4B4B;
color: white;
text-transform: uppercase;
font-size: 12px;
padding: 5px 8px;
cursor: pointer;
}

ボタン

画像だと色を変更するのも一苦労ですがCSSだけの表示なら色コードだけで変更できるので楽ですね。
ボタンに影があり、マウスをのせると色が若干うすくなり、クリックすると押した感じにしてみました。

WordPress Template Category

 

Htmlソースコードサンプル

<div class=”btn_s”><a href=”http://wp-site.biz/category/theme”>テーマ一覧はコチラ</a></div>

 

cssソースコードサンプル

.btn_s{
text-align: right;
clear: both;
padding: 10px;
margin: 10px;
}
.btn_s a,
a.btn_s {
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
text-transform: uppercase;
font-size: 12px;
padding: 6px 25px;
margin-left: 5px;
cursor: pointer;
background: #dedede;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -o-linear-gradient(top, #f5f5f5, #e5e5e5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f5f5f5′, endColorstr=’#e5e5e5′);
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
border: solid 1px #aaa;
}

.btn_s a:hover,a.btn_s:hover {
border-color: #999;
color: #222;
background: #e9e9e9;
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e9e9e9));
background: -moz-linear-gradient(top, #fefefe, #e9e9e9);
background: -o-linear-gradient(top, #fefefe, #e9e9e9);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.btn_s a:active,
a.btn_s:active {
color: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#dcdcdc));
background: -moz-linear-gradient(top, #f4f4f4, #dcdcdc);
background: -o-linear-gradient(top, #f4f4f4, #dcdcdc);
-webkit-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
-moz-box-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
}

ページナビゲーション

Wp-pagenaviをインストールをしている場合、CSSに以下のコードを追加すると下記のようないい感じになります

«123»5…最後 »

 

cssソースコードサンプル

.wp-pagenavi { margin:10px 0 10px 30px; padding:0; font-size:11px; }
.wp-pagenavi a, .wp-pagenavi a:visited { padding:5px 10px; margin:3px; text-decoration: none; color:#777; border:1px solid #bbb;
background:#fff; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.wp-pagenavi a:hover { border:1px solid #2089cc; color:#2089cc; background:#fff; }
.wp-pagenavi span.pages { padding:0px; margin:0 0 14px 5px; color:#777; display:block; }
.wp-pagenavi span.current { padding:5px 10px; margin:3px; border:1px solid #a9b9b7; color:#fff; background:#a9b9b7; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.wp-pagenavi span.extend { padding:5px 10px; margin:3px; border:1px solid #a9b9b7; color:#777; background:#fff; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

最後に

CSSだけで画像のような表現ができてもIEでは見れません！個人的にはIEは表示テストでしか使用しませんが、昨日アクセス解析のブラウザ比率をみるといまだにIE6を利用されている方がけっこういましたのでIE6でサイトを確認してみたら崩れまくっていました。(配布テーマはIE6でも表示は大丈夫です)

IEがある限りHTML5、CSS3は発展しないような気がします・・・自分のサイトだといいですがクライアントのサイトにはまだXHTMLしか利用できないなと痛感しました。

基本的にWpサイトビズで配布しているテーマはfaviconが表示されるようになっています。faviconとはサイトを表示したときにブラウザに出現するアイコンのことです。

※URLの左横と上のブラウザのタブにある葉っぱがfaviconです。

このfaviconがあると何がいいかというと多くブラウザを開いた時でもどこにサイトがあるか見つけやすくなるのでユーザビリティーの点からも優れているといえます。

基本faviconはicoという拡張子なのでgifやjpgの画像はicoに変換しないといけません。『Favicon Japan!!』というサイトのツールを利用するとgifやjpgの画像をfavicon.icoに変換することができます。32×32pxの画像を作成してfavicon.icoを作ってみましょう。

favicon.icoが完成したらテーマフォルダ内のindex.phpと同じ階層にアップロードしてください。

Wpサイトビズの配布テーマはナビゲーションを自分で直接書きこむようになっているものがほとんどです。このサイトを例にして変更手順をご紹介いたしますので参考にしながら自分で変更をしてみてください。

このサイトのヘッダー部分の変更箇所はサブナビゲーションとメインナビゲーションの2箇所です。『管理画面』の『外観』にある『テーマ編集』をクリックして『ヘッダー（header.php）』を編集します。

最上部のサブナビゲーション

サイトの上部にあるサブナビゲーションのリンクとページ名を変更します。

header.php変更箇所

<ul id=”h_list”>
<li>テーマ情報を<a href=”<?php bloginfo(‘rss2_url’); ?>”>RSSでチェック！</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/sitemaps“>サイトマップ</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/links“>リンク集</a></li>
</ul>

サイトマップとリンクの赤文字の箇所を変更してください。変更後は『ファイルを更新』をクリックしてください。

 

メインナビゲーション

ナビゲーションのリンクとページ名を変更します。

header.php変更箇所

<ul id=’nav’>
<li><a href=”<?php bloginfo(‘url’); ?>”>トップページ</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/category/theme“>WordPressテンプレート</a>
<ul>
<li><a href=”<?php bloginfo(‘url’); ?>/category/business“>企業テーマ</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/category/shop“>店舗テーマ</a></li>
</ul>
</li>
<li><a href=”<?php bloginfo(‘url’); ?>/category/plug“>プラグイン情報</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/service“>サポートサービス</a>
<ul>
<li><a href=”service#works01“>スタートプラン</a></li>
<li><a href=”service#works02“>リニューアルプラン</a></li>
<li><a href=”service#works03“>WordPress化プラン</a></li>
</ul></li>
<li><a href=”<?php bloginfo(‘url’); ?>/kiyaku“>利用規約</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/contact“>お問い合わせ・ご相談</a></li>
</ul>

赤文字箇所のURLとページ名を変更してください。変更後は『ファイルを更新』をクリックしてください。

サイドバーの設定方法は通常のウィジェットからの設定、メニュー＋ウィジェットからの設定、直接書き込みの3つがあります。一番多く利用するのはウィジェットからの設定で直接書き込みはこのサイトのサイドバー『Contents』のように少し変わっているサイドバーの表示や変なソースコードを入れたくない場合などに行います。

普通にウィジェットからの設定は説明が不要だと思いますのでメニュー＋ウィジェットからの設定をご紹介します。

『管理画面』から『外観項目』の『メニュー』を選択して以下の設定を行います。

これで『メニュー』の設定は終了です。次はウィジェットからの設定です。『管理画面』から『外観項目』の『ウィジェット』を選択して以下の設定を行います。

『カスタムメニュー』というウィジェットをサイドバーにドラッグ＆ドロップで移動させます。

『タイトル』を記入して『メニューを選択』で先に作成した『メニュー』を選択して『保存』をクリック。

これで完成です。

ウィジェットを使っての直接書き込み

『テキスト』というウィジェットをサイドバーにドラッグ＆ドロップで移動させます。『タイトル』を記入してソースコードを入力します。下記はこのサイトの例です。

ソースコードを入力後『保存』をクリック。

これで完成です。ソースコードサンプルは以下です。

<ul>
<li><a href=”http://wp-site.biz/category/business”>企業テーマ<br /><span>Company Theme</span></a></li>
<li><a href=”http://wp-site.biz/category/shop”>店舗テーマ<br /><span>Shop Theme</span></a></li>
<li><a href=”http://wp-site.biz/service”>サポートサービス<br /><span>Service</span></a></li>
<li><a href=”http://wp-site.biz/category/plug”>プラグイン情報<br /><span>Wordpress Plugin</span></a></li>
</ul>

Webサイトビズで配布しているWordpressテーマのトップページは自分で文章を入力するようになっています。これは内部SEO対策面でキーワード比率を自分で調整するためときれいなソースコードを保つための2点の理由からです。

テーマの大きな構成としては

①訪問ユーザーを離脱させないための文章エリア
②見てもらいたいコンテンツやカテゴリの紹介エリア
③新着記事のタイトルが表示されるNews&topicsエリア

の3つもしくは2つのエリアで構成されています。

編集の際はindex.phpのバックアップをとってから編集を行ってください。
※phpのコードや</div>などのコードは消さないように注意してください。

サブページの設定

各テーマのダウンロードファイル内にサブページのソースコードを記載したテキストファイルがあるかどうかを確認してください。
もしくはテーマデモサイトのコンテンツ内に記載している場合もあります。

もしわからない場合はWebサイトビズまでお気軽にお問い合わせください。

WordPressで記事を投稿する前にカテゴリを設定しますがこのカテゴリにはIDが自動で付与されています。特にパーマリンクの変更などをしている場合はこのIDはわかりにくいですね。

おそらくこのカテゴリのIDを調べるという段階だともうWordpress初心者ではないと思いますので細かい説明は省いて画像で説明したいと思います。

カテゴリにマウスを乗せると下のほうにIDがでます。ここではID=21の21の部分がカテゴリIDになります。とても簡単なのですが知らないと見つけるのは意外と大変なんです。