「タグ」タグアーカイブ

プラグインを使わず、WordPressでタグクラウドの表示の順番を制御する。ランダム、使用頻度順など

WordPressで、タグクラウドがいつも同じものしか表示されないのでランダムで表示してみた

WordPressのタグは限りなく投稿が可能。

でも、デフォルトの状態だと登録名順でしか表示されないので、どれだけたくさん入力しても、最初に登録した30個しか表示されない。
これをランダムで表示させるようにしたい。

functions.phpへの記述で、使用頻度で抽出させることはできる
//タグクラウドの順番を使用頻度で
function my_tag_cloud($args) {
 $myargs = array(
 'orderby' => 'count', //'name'タグ名(初期値), 'count'使用回数
 'order' => 'RAND', //'ASC'昇順(初期値), 'DESC'降順, 'RAND'ランダム
 'number' => 50 // 表示数 '0'と書くと全てのタグを出力
 );
 $args = wp_parse_args($args, $myargs);
 return $args;
}
add_filter( 'widget_tag_cloud_args', 'my_tag_cloud' );

これで、使用頻度の高い順に50個抽出して、それをランダムに並べなおして表示。

とすることができる。

ただし、これだと、使用頻度が低いモノまで含めて50個をランダムに抽出して並べることはできない。
 

使用頻度に関わらず、全てランダムに抽出する方法は?

number0 にして無制限に全部抽出してからランダムに並び替える。

wp-includes/category-template.php

wp_tag_cloud() のソースが書いてあるので、その辺をいじくって、出力する個数を50個にする。

で抽出。

とする必要がある。

この記事も読まれています

投稿画面で、メタディスクリプション、トラックバック、リビジョン、フォーマットなどの不要なオプションを非表示 WordPress BuddyPressカスタマイズメモ

投稿画面で、メタディスクリプション、トラックバック、リビジョン、フォーマットなどの不要なオプションを非表示

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。

WordPressに慣れていない人が使うことも想定できるので、ややこしいSEOモノや、使わないトラックバックなどのメタボックスは全て非表示にしておきたい。


 ↓↓↓


 

ついでに、上の「表示オプション」のチェックボックスもいらないので消えてほしい。


 ↓↓↓

 

functions.php へ記述

//投稿画面の削除

if (!current_user_can('administrator')) {
function yuya_remove_admin_menu() {
//sango投稿ページ
remove_meta_box( 'sng-meta-description', 'post', 'normal' );//メタデスクリプション
remove_meta_box( 'sng-title-tag', 'post', 'normal' );//【高度な設定】titleタグ
remove_meta_box( 'sng-meta-roboto', 'post', 'side' );//メタロボット設定
remove_meta_box( 'sng-one-column', 'post', 'side' );//1カラム(サイドバーを非表示)
remove_meta_box( 'sng-no-ads', 'post', 'side' );//この記事では広告を非表示

//sango固定ページ
remove_meta_box( 'sng-meta-description', 'page', 'normal' );//メタディスクリプション
remove_meta_box( 'sng-title-tag', 'page', 'normal' );//【高度な設定】titleタグ
remove_meta_box( 'sng-meta-roboto', 'page', 'side' );//メタロボット設定

//デフォルトの投稿ページ
remove_meta_box( 'postcustom','post','normal' ); // カスタムフィールド
remove_meta_box( 'postexcerpt','post','normal' ); // 抜粋
//remove_meta_box( 'commentstatusdiv','post','normal' ); // ディスカッション
remove_meta_box( 'commentsdiv','post','normal' ); // コメント
remove_meta_box( 'trackbacksdiv','post','normal' ); // トラックバック
remove_meta_box( 'authordiv','post','normal' ); // 作成者
remove_meta_box( 'slugdiv','post','normal' ); // スラッグ
remove_meta_box( 'revisionsdiv','post','normal' ); // リビジョン
//remove_meta_box( 'tagsdiv-post_tag' , 'post' , 'side' ); // 投稿のタグ
//remove_post_type_support( 'post', 'title' ); // 投稿ページのタイトル
//remove_post_type_support( 'post', 'editor' ); // 投稿ページの本文欄
remove_post_type_support( 'post', 'author' ); // 投稿ページの作成者
//remove_post_type_support( 'post', 'thumbnail' ); // 投稿ページのアイキャッチ
remove_post_type_support( 'post', 'excerpt' ); // 投稿ページの抜粋
remove_post_type_support( 'post', 'trackbacks' ); // 投稿ページのトラックバック
remove_post_type_support( 'post', 'custom-fields' ); // 投稿ページのカスタムフィールド
//remove_post_type_support( 'post', 'comments' ); // 投稿ページのコメント
//remove_post_type_support( 'post', 'revisions' ); // 投稿ページのリビジョン
remove_post_type_support( 'post', 'page-attributes' ); // 投稿ページのページ属性
remove_post_type_support( 'post', 'post-formats' ); // 投稿ページの投稿フォーマット

remove_action( 'admin_menu', 'add_sngmeta_field' );
}
add_action( 'admin_menu', 'yuya_remove_admin_menu', 20 );
}

頭に「//」がついている場合は、コメントアウトされて非表示にならないので、上のコードで、例えば「コメント」も非表示にしたい場合は、
頭の

//remove_post_type_support( 'post', 'revisions' ); // 投稿ページのリビジョン

の//を消しておく。
 

“管理者”でもメニューを削除したい場合は、一番上と一番下の

if (!current_user_can('administrator')) {

}

を削除すればいい。

これでデフォルトであるものや、Sangoで追加されるメタボックスのオプションは非表示にできる。

その他、プラグインで追加されるものに関しては、別途非表示にしなきゃいけない。

その時指定する、ID(key)はページソースで class や ID から推測するか…

var_dump();

を使って調べる必要がある。

tableのthやtdをソースを変えずにCSSだけで縦並びにする方法 – レスポンシブデザイン編 –

HTMLのソースを全く変えずにtableの配置を縦並びにする方法

結論から言おう。実現可能だ。

一般にこの方法を実現したいならdivを使ってやる方がいいと言われている。その通りで、最初から作るならdivでやるべきだ。

でも、フォームのソースが元々あって、そこをどうしても変更できない場合や、CSSだけで対応する必要がある場合もあるだろう。
なので、今回はCSSだけで実現する方法を紹介。

miniiman

手軽なやつだと、position absoluteを使う方法と、 display blockを使う方法がある。

 

CSSに1つ記述を追加するだけ

 

table, tbody, tr, th, td {
display: block;
}

これだけ。
ちなみに、tfootやtheadを使っている場合は、それも含めてdisplay block してやるといい。

IE6,7,8まで含めて対応したい場合はtableのブロック要素化が効かないかもしれない。
そんな時には、
IE6,7,8,9だけCSSで違う記述を反映させる方法

この辺を参考に。

 

レスポンシブ(スマホ用とPC用で自動的に変える方法)で実装する

テーブルを縦並びにするだけなら先ほどの display blockだけで大丈夫だが、PCでは普通のテーブル、スマホでは縦並びにしたい場合の対応も考えよう。

table-normal

まず、レスポンシブデザインを考えるに辺り、メディアアンカーを覚えなければならない。

・PCで適用されるCSS

@media screen and (min-width:601px) { /*601px以上*/

この間にPC用のCSSを書く。

}

・スマホで適用されるCSS

@media screen and (max-width:600px) { /*600px以下*/

この間にスマホ用のCSSを書く。

}

という感じ。

「スマホ用」「PC用」と言っているが、本来の意味は、

「画面サイズが600以下の時はこのCSSだよ」
「画面サイズが601以上の時はこのCSSだよ」

という事だ。
数字は自分で勝手に変えてもいい。タブレットも分けたい場合などには、3つにしたりすることもできる。

@media screen and (min-width: 500px) and (max-width: 800px) {

画面サイズが500~800の間適用されるCSS。タブレット用とか?

}

でも、昨今のスマホの画面サイズからいくと、600pxで分けるのがおすすめ。

今回のスマホ時にだけテーブルを縦に並べたいなら、

@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
table, tbody, tr, th, td {
display: block;
max-width: 98%; /*スマホ画面ほぼ一杯に広がる感じ*/
}
}

としてやれば、

table-sp

こうなる。PC版はそのまま。

ちなみに、 max-width:98%; とかは自由に変えてくれ。

overflow:hidden; なんかも使えるかもしれない。

メディアアンカーの外にテーブルの幅を指定している場合は、上記スマホ用CSSを追加しても効かない場合がある。その場合は

@media screen and (min-width:601px) { /*601px以上(PC用)*/
table {
width: 680px; /*PC版の横幅*/
}

という風に、PC用メディアアンカー内に移動すること。