Webの記録

WordPressのウィジェットに表示した「タグクラウド」をカスタマイズしてみる

投稿日:2014年11月4日 更新日:

この記事は約 7 分で読めます。

tag

WordPressのタグクラウドを表示させる方法として、「ウィジェットに表示させる方法」と、「オリジナルのsidebar.phpにテンプレートタグを記述させる方法」と、2通りの方法があるようです。

「ウィジェットに表示させる方法」の場合、思うような表示ができなくて嫌だったので、表示順序・表示数やスタイルなどの設定など、今回いろいろ試しにいじってみました。

functions.phpにちょこっと記述、cssでスタイル設定をすれば、少しカスタマイズができることが分かりました。

でも・・・管理画面でこれを好きなように設定ができるようになれば、もう少し活用がしやすくなると思うんだけれど・・・。いつか改善させるといいな~と思いながら、メモです。



【2015.12.20追記】WordPress4.4になってから、今までのままだと崩れがでますので追記しています。

目次

  1. デフォルトの設定
  2. カスタマイズの方法


デフォルトの設定

<?php $args = array(
	'smallest' => 8,  // 最小のフォントサイズ
	'largest'  => 22, // 最大のフォントサイズ
	'unit'     => 'pt', // フォントサイズ単位(CSSで使用できる単位pt, px, em, %)
	'number'   => 45,     // 表示タグ数の上限
	'format'   => 'flat', // 表示フォーマット('flat'(横並び)、'list'(縦並び &lt;li&gt;&lt;/li&gt;)、'array'(表示されない。他のPHPコード用に使用する場合)
	'separator'  => "\n",   // 表示タグ毎の区切り
	'orderby'    => 'name', //並び替項目 'name'(タグ名)、'count'(投稿数)
	'order'      => 'ASC',  //並び順 'ASC'(昇順)、'DESC'(降順)、'RAND'(ランダム)
	'exclude'    => null,  // 除外するタグ 除外するタグのIDをカンマ区切りで列挙
	'include'    => null, // 表示するタグ 表示するタグのIDをカンマ区切りで列挙
	'topic_count_text_callback' => default_topic_count_text, //タグリンクにtitle属性を付与する関数 'default_topic_count_text'(標準で"~件のトピック"と付けられます。)
	'link'       => 'view', // リンク先 'view'(タグアーカイブページ)、'edit'(編集ページ)
	'taxonomy'   => 'post_tag', // クラウドに表示する項目 'post_tag'(タグ)、'category'(カテゴリー)、'link_category'(リンクカテゴリー)、'any other registered taxonomy'(全て)もしくは配列で複数指定する。
	'echo'       => true, // 表示有無 true(表示)、false(非表示:変数として使用する場合)
	'child_of'   => null, // see Note!
); ?>

上記の設定から変えたい部分をfunctions.phpで記述、そしてcssでスタイル設定をするという感じになるようです。

【参考】WordPress Codex


カスタマイズの方法

functions.phpに試しに以下のような感じで記述してみました

【2015.12.20追記】8行目に1行追加しました。

<?php
// テーマのタグクラウドのパラメータ変更
function my_tag_cloud_filter($args) {
    $myargs = array(
        'number' => 70,  // 70タグまで表示させる
        'order' => 'DESC', // 降順で表示
        'orderby' => 'count', //投稿数順で表示
    'echo' => false //ここを追加しました
    );
    return $myargs;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');
?>

画面表示させてみると、タグの並びや表示数がちゃんと変わってくれました

タグクラウドの表示を変えてみた

あとはcssでデザインを整えます。

※以下のcssは、【WordPress】ウィジェットのタグクラウドをプラグインを使わずにカスタマイズする方法|Niji-Lifeさまを参考にさせて頂きました。

.tagcloud {
  position: relative;
  overflow: hidden;
  padding: 0 22px 0 14px;
  text-align: left;
}
.tagcloud a {
  display: inline-block;
  background: #fbf8e5;
  white-space: nowrap;
  font-size: 98%;
  color: #a97837;
  line-height: 1.3;
  padding: 3px 8px;
  margin-bottom: 5px;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 2px solid #D4CFC1;
}
 
.tagcloud a:hover {
  color: #b54f41;
  text-decoration: underline;
}


これでWordPressのウィジェットに表示した「タグクラウド」をカスタマイズが出来ました!

ただfunctions.phpに記述するので、ちょっと間違うと画面が真っ白になります。私もこのブログを一瞬真っ白にしてしまいましたw
バックアップは先にしてから・・・記述をするようにしましょう!(教訓。。。)

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPressが勝手に挿入する「pタグ」を自動挿入させない方法

この記事は約 1 分で読めます。 WordPressには「auto paragraph」という、自動でpタグを挿入してくれる機能があります。 そのため、意図しない見た目になってしまうことが、時々起きて …

no image

WordPressがいきなり真っ白になった時。

この記事は約 1 分で読めます。 WordPressでこのサイトを作って、約2年になります。 地道に継続していて、当たり前に使っていたのに・・・。 ある日、ブラウザに表示させてみると・・・真っ白になっ …

no image

Google Analyticsでユーザーの「年齢・性別・興味」を知るには?

この記事は約 1 分で読めます。昨年10月に追加されたGoogle Analyticsの「ユーザー属性・インタレストカテゴリ」。 サイトに訪問したユーザーの「年齢・性別・興味」が分かるようになりました …

no image

苦手なJavaScriptをイチから勉強してみる【記述の基礎編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

Yahoo!アクセス解析を使ってみた感想【レポート】

この記事は約 1 分で読めます。 以前、「Yahoo!アクセス解析を設定してみました!」でYahoo!アクセス解析を設定し、Google Analyticsと一緒にこのブログのアクセス解析を開始しまし …