「制作物」カテゴリーアーカイブ

私が制作した各種ツール・サイト・サービス群です。思いつくままに色々作りました。TRPGやwordpressが主ですが、私好みの極端な物が多いです。

wordpressの特定のページだけ記事一覧表示件数を変える

wordpressでは記事一覧で表示される記事件数を変更することが出来ますね。しかし、フロントページは5件表示で、カテゴリページは20件欲しいのおおお!!

という時があると思います。

というわけでそういう時どうするのか、ですが、ページ毎に記事一覧の取得条件を変えていく必要があります。

まず普通のページではこんな感じで記事を取得しているのがほとんどですよね。

<?php if (have_posts()) : ?>
ループ前記述
<?php while (have_posts()) : the_post(); ?>
ループ中:記事一覧を出力
<?php endwhile; ?>
ループ後記述
<?php endif; ?>

ここに手を加える事で記事一覧の出力方法を変更していく事ができますよ。

$query_array = array(
'order' => 'DESC',
'posts_per_page' => 5,
'paged' => $paged,
);
$query_req = new WP_Query($query_array);
<?php if ($query_req->have_posts()) : ?>
ループ前記述
<?php while ($query_req->have_posts()) : $query_req->the_post(); ?>
ループ中:記事一覧を出力
<?php endwhile; ?>
ループ後記述
<?php endif; ?>

「$query_array」が出力条件の指定文章です。「posts_per_page」が表示する件数。今回は5件としています。「paged」が現在のページ。これが無いと二ページ目に行っても最初の五件がまた表示されちゃいます。

あとは「$query_req」に出力結果が収納されていますので、そこからポスト情報を抜き出していくだけです。簡単!

wordpress記事投稿画面に英訳・和訳の翻訳機能を追加する「aoringo Translation」を開発しました。

wordpressで記事を投稿する際、割と面倒なのがパーマリンクの設定です。日本語でやるとすさまじく長くなるのが悩みの種。だからといって英訳するのも翻訳ページへといくのも面倒くさい。嗚呼、記事投稿画面に翻訳機能があればいいのに。

というわけで作りました。

なんという便利さ。ちょろっとした単語を英訳するのは勿論、和訳まで出来ちゃいますよ。ハァハァ。

単語を入力して、ボタンを押せば、

うわああああ便利いいいいいいい!!!

設定は「ダッシュボード>設定>Aoringo Translationの設定」から行いますよ。

動作にはマイクロソフトの翻訳API「Microsoft Translator」の設定情報が必要です。各々で取得してくださいね。ググると取得方法の記事は沢山出てきます。

設定が終わり、保存した後で翻訳文章が表示されればOKです。

というわけでダウンロードは下記から。※パーマリンクを自動英訳する「aoringo parmalinker」とは併用できません。

ダウンロード

wordpressにログインしている人をgoogleアナリティクスの対象外にする

googleアナリティクス、使っていますか! 便利なんですけれど、記事編集やテーマの編集をしていると、ウナギ昇りでアクセスpvを稼いじゃって、ノイズになるんですよね。

googleアナリティクス側でIPを指定して、とか色々できるとは思うのですが面倒くさいわけです。

というわけでwordpressにログインしている人をgoogleアナリティクスから除外しちゃいましょう。

 is_user_logged_in()

「is_user_logged_in()」は、その人がログインしているのかどうかを確認するためのwordpess関数です。これを使って、ログインしていたらgoogleアナリティクスのコード自体を表示しないようにしちゃいます。

<?php if(!is_user_logged_in()): ?>
グーグルアナリティクスコード
<?php endif; ?>

ヘッター部分に記述してやればOK。

ログインしている。

ログインしていない。

できてますね。成功です!

wordpressの投稿画面ビジュアルエディター入力部分の高さを変更する

wordpressの投稿画面はどうにもちょっと小さいんですよね。画像やらプログラムコードを貼り付けると一気にその小ささに「うへぇ」とうめくことになります。

ここをドラッグすると大きく出来るのですけれど、プラグインの影響なのか知りませんが環境が保存されなくなったりして、また入力画面が小さくなるんですよ。

なので大きくしましょ。

function post_output_css() {
$pt = get_post_type();
if($pt == 'post') { //投稿の場合はpost
?>
<style type="text/css">
#wp-content-editor-container textarea, #wp-content-editor-container iframe{
min-height :1000px !important;
}
</style>
<?php
}
}

add_action('admin_head', 'post_output_css');

ポスト投稿画面にcss記述を追加し、ビジュアルエディターとテキストエディターに最低高さを設定しましょう。「!important」で強制させてます。

わーい。広々だ~。

wordpress投稿画面のカテゴリーメタボックスを変更する

wordpressのカテゴリー、上手に使えていますか?

大量のカテゴリーを抱えていると、これが中々どうして大変になってくるんですよね。というわけで修正していきましょう。

メタボックスの大きさを変更する

デフォルトのカテゴリーメタボックスはこんな感じですよね。

小さいです。スクロールバーが凄く狭くなっているのがわかります。新しい記事を投稿するたびに、ここからお目当てのカテゴリーを探すのが大変なんです!!!

function post_output_css() {
$pt = get_post_type();
if($pt == 'post') { //投稿の場合はpost
?>
<style type="text/css">
div#categorydiv{/*メタボックス自体*/
height:auto;/*の高さ指定を解除*/
}
div#category-all{/*カテゴリーのリスト*/
max-height:none;/*高さ上限を解除*/
height:auto;/*高さ指定を解除*/
}
</style>
<?php
}
}

add_action('admin_head', 'post_output_css');

というわけで、エディター画面にcss記述を追加してカテゴリーメタボックスをスクロール無しの全表示にしちゃいました。好みの長さがある場合は「div#category-all」のheightに数字を指定すればその長さになってくれますよ。

うわー快適ー。

親カテゴリを選択できなくする

私のブログでは親カテゴリを記事に設定しないようにしています。好みの問題でもありますけれども。

ただ、デフォルトだと親カテゴリも選択できちゃうんですよね。地味にうざったいのでここを変更しましょう。

参考したのはこちら→解決!WordPress投稿画面のカテゴリーをカスタマイズする方法 | 株式会社LIG

jqueryでむりやりとかもあるようですが、個人的にはこちらの方がカスタマイズしやすいのでこの方法をとりますよ。ただ、参考元のものをそのまま利用すると、一番親のカテゴリーのみボタンが非表示になります。

私としては子を持ってるカテゴリーを全てボタン非表示にしたいんですよね。

というわけでちょこっと改造。

class Danda_Category_Checklist extends Walker_Category_Checklist {

function start_el(&$output, $category, $depth, $args, $id = 0) {
extract($args);
if(empty($taxonomy))
$taxonomy = 'category';
if($taxonomy == 'category')
$name = 'post_category';
else
$name = 'tax_input[' . $taxonomy . ']';
$class = in_array($category->term_id, $popular_cats) ? ' class="popular-category"' : '';
//親カテゴリの時はチェックボックス表示しない
// print_r($category);
$cat_child = get_category_children($category->term_id);
if($cat_child !== "") {
$output .= "n<li id='{$taxonomy}-{$category->term_id}'$class>" . '<label class="selectit">' . esc_html(apply_filters('the_category', $category->name)) . '</label>';
} else {
$output .= "n<li id='{$taxonomy}-{$category->term_id}'$class>" . '<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="' . $name . '[]" id="in-' . $taxonomy . '-' . $category->term_id . '"' . checked(in_array($category->term_id, $selected_cats), true, false) . disabled(empty($args['disabled']), false, false) . ' /> ' . esc_html(apply_filters('the_category', $category->name)) . '</label>';
}
}
}

「get_category_children($category->term_id)」にて子カテゴリーを取得して、もしも空なら(子カテゴリーが無ければ)ボタンを表示するようにします。

カテゴリー選択をラジオボタンに

さらに先程の参考元にならい、チェックボックスをラジオボタンに変更します。これによりカテゴリーの複数設定が回避できますね。

最終的なコードは下記になります。

class Danda_Category_Checklist extends Walker_Category_Checklist {

function start_el(&$output, $category, $depth, $args, $id = 0) {
extract($args);
if(empty($taxonomy))
$taxonomy = 'category';
if($taxonomy == 'category')
$name = 'post_category';
else
$name = 'tax_input[' . $taxonomy . ']';
$class = in_array($category->term_id, $popular_cats) ? ' class="popular-category"' : '';
//親カテゴリの時はチェックボックス表示しない
// print_r($category);
$cat_child = get_category_children($category->term_id);
if($cat_child !== "") {
$output .= "n<li id='{$taxonomy}-{$category->term_id}'$class>" . '<label class="selectit">' . esc_html(apply_filters('the_category', $category->name)) . '</label>';
} else {
$output .= "n<li id='{$taxonomy}-{$category->term_id}'$class>" . '<label class="selectit"><input value="' . $category->term_id . '" type="radio" name="' . $name . '[]" id="in-' . $taxonomy . '-' . $category->term_id . '"' . checked(in_array($category->term_id, $selected_cats), true, false) . disabled(empty($args['disabled']), false, false) . ' /> ' . esc_html(apply_filters('the_category', $category->name)) . '</label>';
}
}
}

これで快適に記事へとカテゴリー設定ができるようになりますね!

ついでに開閉式にしちゃいますか?→wordpress記事投稿画面のカテゴリー一覧を開閉式にする » aoringo works

記事一覧などのループ処理をテンプレート化してメンテナンス性をアップ

index.phpとsearch.phpに同じ内容のループ処理を記述していませんか?

良くある話ですよね。基本的な記事を出力する部分のレイアウトは同一だとしても、検索ページとフロントページは別々に作りたい。ただ、後々になってレイアウトの変更をしていくとなった時に困るんですよね。ちょっとした変更でも複数のphpファイルを編集しないといけなくなるのは面倒だし避けたいです。

というわけでループ処理をテンプレート化しましょ?

例えば私のサイトでは、記事一覧を出力するときはこういうコードが働いています。

<?php
$pagereq = $wp_query->query[paged] + 0;
$topposts = null;
while(have_posts()) {
the_post();
$parm = get_permalink();
$title = get_the_title();
$thum_id = get_post_thumbnail_id($post->ID);
$topimage = wp_get_attachment_image_src($thum_id, 'thumbnail');
$exp = mb_substr(get_the_excerpt(), 0, 50, 'utf-8')."...";
$topsrc = $topimage[0];
$topposts .= <<<"EOD"
<div id="post-{$post->ID}" class="post-{$post->ID} post type-post status-publish format-standard entry-item enry-lists">
<div class='thumbnail-box'>
EOD;
if(has_post_thumbnail()) {
$topposts .= "
<a href="{$parm}" class="thumbnail-align">
<img width='100' height='100' src='{$topsrc}' class='attachment-thumbnail wp-post-image' alt='{$title}' />
</a>";
}
$topposts .= "</div><h2 class='entryTitle entrylink'><a href='{$parm}'>$title</a></h2><div class='entry-summary'>{$exp}
</div>
</div>
n";
}
echo $topposts;

?>

色々な処理を挟んでいるのでちょっと長めですね。この記述をindex.phpやsearch.phpやarchive.phpで利用する場合、直接このコードを埋め込むよりも外部化してしまう方がグッと楽になるのは明白です。

get_template_part()を利用する

外部化する場合、get_template_part()がお勧めです。該当部分をテンプレート化する事で「<?php get_header(); ?>」などと同じような感覚で管理できるのでメンテナンス性が向上します。

関数リファレンス/get template part – WordPress Codex 日本語版

<?php get_header(); ?>
<?php get_template_part('loop', 'excerpt'); ?>
<?php get_footer(); ?>

こういう極端な事もできちゃいますw

get_template_part()は「get_template_part( スラグ名, テンプレート名)」という形で利用します。上記のコードの例だと呼び出されるテンプレートファイルは「loop-excerpt.php」です。このファイルの中に記事一覧出力のための記述が一式入っています。

このような形で管理していれば、忘れた頃に手を入れても迷うことはありません。

jetpackの人気記事ウィジェットをカスタマイズする

jetpackはとても便利ですね。人気記事ウィジェットなんてのもあるのですから。

しかしこのウィジェット、cssがあまりイケてません。画像も小さいんですよね。というわけでカスタマイズしちゃいましょう。

画像の解像度を変更する

人気記事ウィジェットを司ってるのは「top-posts.php」です。「jetpack/modules/widgets/」に入っています。ここで画像の解像度が決定づけられています。

$get_image_options['avatar_size'] = 200;
} else {
$get_image_options['avatar_size'] = 40;

「40」で検索して出た部分を好みの数字に変更します。

CSSを除外する

jetpackに含まれるcssファイル「widget-grid-and-list.css」を直接編集しても見た目を変更する事が出来ますが、jetpackをアップデートしてしまうと、上書きされてしまいます。影響はできるだけ少なくありたいものですね。というわけでこのCSSファイルはそもそもwordpressで読み込まないように除外してしまいましょう。

add_action('wp_print_styles', 'deregister_styles', 100);
function deregister_styles() {
wp_deregister_style('widget-grid-and-list');
}

テーマのfunction.phpに上記コードを追加しましょう。これでcssファイルを読み込まなくなります。あとはテーマファイルの方のstyle.cssの方で見た目をカスタマイズしていきましょう!

完全保存版 この組み合わせで完璧!wordpress高速化プラグインまとめ

試行錯誤してきたwordpressの高速化プラグイン。その総括をしようかなと思います。

ああでもない、こうでもないと色々とやってきましたが、ようやく落ち着いたという感じです。

私が関わっているwordpressサイトにはこの組み合わせで運営されておりますよ。

キャッシュ系

その名の通りキャッシュ系プラグイン。これが無いと始まりませんね。

Head Cleaner

WordPress › Head Cleaner « WordPress Plugins

ソース整理といえばこれ。ヘッダー部分のお掃除をしてくれます。jsファイルやcssファイルを圧縮してキャッシュ化しておくことも可能。cssファイルを編集してもその都度新しいcssキャッシュファイルを作成してくれるので他キャッシュ系プラグインの影響でレイアウトが崩れる心配も無し。

本当助かってます。ありがとうございます。ふがふが。

WP Super Cache

WordPress › WP Super Cache « WordPress Plugins

wordpressの出力画面をhtmlに出力してそれを見せちゃうというページキャッシュプラグイン。動的な処理を常時やるようなサイトに向きませんが、このサイトのような普通のブログにはモアベターなプラグインとなります。

キャッシュの有効期限が切れても、切れたキャッシュをユーザーに提供しつつ新しいキャッシュを裏で生成したりと痒いところに手が届きます。設定が豊富で取っつきにくいかも知れませんが、その分細やかな設定が可能です。

wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説 » aoringo works

モバイルモードをオンにすれば、別にスマフォ用のキャッシュを作りそれを見せるようになります→wp super cacheのモバイルモードはスマフォ用のキャッシュファイルも生成してくれる! » aoringo works

DB Cache Reloaded Fix

WordPress › DB Cache Reloaded Fix « WordPress Plugins

mysqlリクエストをキャッシュするプラグインです。私は検索ページをキャッシュしないようにしているので、そういう時はこいつが働くようになっています。wordpressはmysqlで全ての設定やデータを管理するので、このプラグインはもはや必須と言っていいでしょうね。

WP File Cache

WordPress › WP File Cache « WordPress Plugins

php関数の出力をキャッシュします。これが有ると無いとではかなり動きに差があります。

キャッシュプラグインの組み合わせの最適回答を求めて – aoringo works

DB Cache Reloaded Fix同様、静的キャッシュが動かない所で強力にサポートしてくれます。

001 Prime Strategy Translate Accelerator

WordPress › 001 Prime Strategy Translate Accelerator « WordPress Plugins

wordpressは多言語に対応しており、ページを表示する度にどの言語で表示するべきかをphpにより判定しております。

このプラグインはその部分をキャッシュ化する事で高速化を図りますよ。同様のプラグインはいくつかありますが、このプラグインは閲覧ページ、ログインページ、管理者ページでキャッシュを使うかどうか設定する事が出来ます!! 管理者ページでキャッシュをオンにすると恐ろしい事になるので、私は閲覧ページのみオンにしております。

「MO cache」はもしかするとすさまじい容量を食うかもしれない。 » aoringo works

処理系

wordpressの各種処理を手助けするプラグインです。縁の下の力持ちといった所。

WP Hyper Response

WordPress › WP Hyper Response « WordPress Plugins

phpというのは、普通処理が全て終わってからクライアント側に送信しますが、このプラグインを利用すればphpの処理をリアルタイムでクライアントへと送信するようになります。

結果的に閲覧者はすぐに画面に反応があるのでストレスが減るというわけですね。

サーバーによっては利用できない場合があるので気をつけてくださいね。

画像系

ブログの画像はいつだって頭を悩ませる所ですね。ここでもプラグインは活躍します。

Imsanity

WordPress › Imsanity « WordPress Plugins

アップロードする画像を自動リサイズ! 過去の画像もリサイズできるwordpressプラグイン「Imsanity」が素敵 » aoringo works

アップロードする画像を指定の解像度へリサイズしてくれるプラグインです。どんなに巨大な画像をあげようが、これで「1024px」等と設定しておけば、そのサイズになるのです!!ブログの解像度に合わせて設定しておけばなにより強力な速度対策になるでしょう。

過去にアップロードした画像を一括変換する機能もついてます。

EWWW Image Optimizer

アップロードされた画像を圧縮してくれるプラグイン。場合によっては50%以上も容量を抑える事が出来ます。また、アップロードされたpngをjpgに変換したりする機能もあります。至れり尽くせりですね。このプラグインも過去にアップロードした画像を圧縮する事が出来ます。

また、テーマファイルに含まれている画像も圧縮する事が出来るんですよ!! ワザマエ!

Unveil Lazy Load

WordPress › Unveil Lazy Load « WordPress Plugins

画面に表示されるであろう画像だけを読み込むようにして、下へとスクロールを始めたら画像の読み込みを開始する「遅延ロード」をさせる事ができるプラグインです。

どれだけ写真を大量に載せようが、これでかなり負荷を減らすことが出来ますよ!

Jetpack by WordPress.com

WordPress › Jetpack by WordPress.com « WordPress Plugins

CDN設定って面倒くさいですよね・・・このプラグインを導入することによってボタン一個でCDNを導入する事が出来ます。他にも沢山の便利機能が一個に集約されているので、プラグインの節約にもなります。

まとめ

どうですかね。結構な数のプラグインを導入しています。

高速化といっても色々なプラグインの組み合わせ、設定があるのでとても大変だとは思いますが、是非参考にしてみてくださいね!

 

wp super cacheのモバイルモードはスマフォ用のキャッシュファイルも生成してくれる!

なんて便利なんだwp super cache!!

どうもちゃん。まだまだキャッシュプラグインを弄りまくっている私です。

今回気まぐれでwp super cacheのモバイルモードをオンにしてみたのですが、これがなんとモバイル用のキャッシュファイルを作成してくれていたのです!!

モバイル用に少し見た目を変えていたのですが、ちゃんと出来てますね。いやあ凄いっす。

 

 

wp super cacheとhead cleanerを同時使用する場合の注意

wp super cache、head cleanerは、設定によっては競合してお互いにベストな状態を発揮できなくなります。

mod_rewrite モードだとブラウザキャッシュが上手くいかなくなる

mod_rewrite モードのキャッシュはとても強力ですが、wordpressの.htaccessに変更を加えるという点では注意が必要です。さらに、wp super cacheとhead cleanerは同じディレクトリにキャッシュファイルを保管しています。

head cleanerディレクトリ内のcssやjsファイルのブラウザキャッシュが上手く動かない場合があるのです。ウゴゴゴ。

というわけで、この二つのプラグインを導入している時は、head cleanerのディレクトリを別に移すのが無難な選択ですね。

方法は公式でもアナウンスされています→Head Cleaner を使用する場合の設定 | dogmap.jp

wp-config.phpに下記コードを追加しましょう。

define('HC_CACHE_DIR', 'minify');

これで「wp-content/minify」にキャッシュファイルを生成するようになります。

出来てます。OKですね!