まだ全然できてない。
今日はカテゴリー一覧をカスタマイズします。
カテゴリをクリックしやすく・見やすく、カスタムする
WordPressサイトでは、
サイドバーにカテゴリ名を載せています。
リスト形式にして、タグ状(ポストイットのような)にしました。
サイドバー幅が大体300～350pxくらい。
その幅に合わせて、クリック領域を広げます。
ホバー時に色が反転するようにすれば、より見やすいです。
では始めます。
参考にしたサイトはこちら。
STINGER7：サイドバーのカテゴリーをカスタマイズする方法【ウィジェット】
http://web-ashibi.net/archives/670
Stinger7カテゴリのクリック領域を広げる
私はStinger7をカスタマイズしています。
他のテーマをご利用の方は応用して下さい。
phpコードやCSSも応用次第で何とかなるでしょう。
多分…。
今回のカスタマイズはfunction.phpを触るので、
最初に全てのデータやファイルをバックアップしておきます。
では、サイドバーにカテゴリーを表示させます。
ウィジェットに追加しても良いし、
phpに直接コードを入力しても良いです。
お好きな方で。
WordPressのカテゴリーを自作する、ウィジェットは使わない方法。
次に、以下のコードをfunction.phpに追加。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
functions.php（子テーマ）PHP
function theme_list_categories( $output, $args ) {
$replaced_text = preg_replace('/<\/a> \(([0-9,]*)\)/', ' <span class="count">${1}</span></a>', $output);
if($replaced_text != NULL) {
return $replaced_text;
} else {
return $output;
}
}
add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );
以上です。
このコードは、
サイドバーに表示されるカテゴリ名と記事数を両方リンク内に入れる為のもの。
元々のページでカテゴリ部分の検証をすると、
<li><a href="リンク先" >カテゴリー名</a> (記事数)</li>
となっています。
このようになっていると、
クリック領域を広げた時にCSSがうまく機能しないそうです。
なので、function.phpで調整しました。
では、次にCSSを記入。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
#side aside ul li ul li { /* デフォルトのアイコンと余白を削除 */
background: none;
padding-left: 0;
}
#side aside li.cat-item a { /* リンク全体の装飾 */
display: block;
overflow: hidden;
font-size: 16px; /* 文字サイズ */
line-height: 2.4em; /* 行（ボックス）の高さ */
text-decoration: none;
vertical-align: middle;
padding: 0 8px; /* 左右の余白 */
color: #fff; /* 文字色 */
background: #47bea0; /* 背景色 */
margin-bottom: 2px; /* 次のカテゴリーとの余白 */
}
#side aside li.cat-item a:hover { /* マウスオーバー時の設定 */
background: #f9d635; /* 背景色 */
color: #278a71; /* 文字色 */
}
#side aside li.cat-item span { /* 記事数部分の装飾 */
line-height: 1em;
float: right; /* 右端に寄せる */
margin: 8px 0 0 8px; /* 位置の調整 */
padding: 4px 8px; /* 文字周りの余白 */
border-radius: 4px; /* 角の丸み */
color: #fff; /* 文字色 */
background: #278a71; /* 背景色 */
}
色や幅はお好みで調整。
カテゴリのIDを使って、アイコンフォントを付ける
以下は上級者編です。
こだわりたい派の方に。
ブラウザの検証を使い、
コードを確認します。
<li class="cat-item cat-item-1">
のように、カテゴリー毎にリスト名がつけられています。
なので、CSSで
li.cat-item-1 a:before {
font-family: "FontAwesome";
content: "\f108";
padding-right: 5px;
}
を追加。
これでカテゴリ名の始めに、
Font Awesomeアイコンが表示されます。
アイコンだけ色を変えたり、
大きさを整えたり、キレイに仕上げましょう。
カテゴリ名を削除したり新規追加したら、
CSSも修正して下さい。
カテゴリー数が多い場合、クリック領域を小さくカスタム
今回はサイドバー幅いっぱいに広げるカスタマイズでした。
カテゴリ数の多い方には、
小さいタグ状のものもオススメです。
私の過去記事もどうぞ。
こちらはStinger5です。
カテゴリ一覧をポストイット風、付箋っぽくするカスタム、WordPressのフッター。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録