タグ別アーカイブ: wordpress

wordpressのアドレスからカテゴリ階層を除去するプラグイン「WP No Category Base」

WordPress › WP No Category Base « WordPress Plugins

アドレスの階層は少ない方が良いと良く言われます。特にカテゴリーは子、孫とどんとん階層を深くするとどこまでも深くなりますね。

私のサイトだと、「http://ao-works.net/category/trpg/kancolle-rpg/kan-howto」みたいなものがあったりします。この「WP No Category Base」では、アドレスにある「/category」を除去し、さらには「/category」付きのアドレスにアクセスすると、除去した方のアドレスへとリダイレクトしてくれる素敵仕様です。

導入はインストールして有効化するだけでOKです。

TRPG版艦これ、艦これRPGのハウツー≫aoringo works

きちんと「http://ao-works.net/trpg/kancolle-rpg/kan-howto」になっているのが確認出来ます。

category付きのアドレスに接続してみます。

リダイレクトされました!!

wordpressカテゴリーにメタ情報を追加し名前とページタイトルを別にする

wordpressのカテゴリー設定は、拘ると少し設定できる情報が少ないです。

せめてカテゴリーの名前と、カテゴリーページで表示するタイトルは別々に設定できればなあと思ってました。

こんな感じで、タイトル見出しだけ表示を変えたいわけです(本来ならここは【制作物】というカテゴリー名が入る所)

そういうわけで、カテゴリー情報に追加設定ができるようにしちゃいましょう。

基本的な方法はこちら→WordPressのカテゴリーにカスタムフィールドを追加する | webOpixel参考になりましたありがとうございます。

カテゴリー設定画面に入力項目を追加する

/**
* カテゴリー編集画面に項目を追加する
*/
add_action('edit_category_form_fields', 'extra_category_fields');
function extra_category_fields($tag) {
$t_id = $tag->term_id;
$cat_meta = get_option("cat_meta_data");
?>
<tr class="form-field">
<th>見出しタグ</th>
<td><input type="text" name="cat_meta_data" value="<?php echo esc_html($cat_meta[$t_id]) ?>"/></td>
</tr>
<?php
}

「get_option(“cat_meta_data”)」で情報を読み出し、実際にinputのvalueに埋め込んでます。参考元では情報を一つずつ収納してましたが、それだとカテゴリーに一つ項目が増えるので、全てまとめてarrayにして収納するようにしています。

カテゴリー情報を保存する

//カテゴリー保存コード

add_action('edited_term', 'save_extra_category_fileds');
function save_extra_category_fileds($term_id) {
  if(isset($_POST['cat_meta_data'])) {
    $t_id                  = $term_id;
    $cat_meta_array        = get_option("cat_meta_data");
    $cat_meta_array[$t_id] = $_POST['cat_meta_data'];
    update_option("cat_meta_data", $cat_meta_array);
  }
}

カテゴリーが保存されるタイミングで情報を「cat_meta_data」に収納しています。これでcat_meta_dataには各カテゴリーの「見出しタグ」情報が追加されていきます。

カテゴリーページに表示する

テーマの「category.php」を開きます。大抵の場合見出しタグには「<?php single_cat_title(); ?>」があると思います。

<?php
$cat = get_category($cat);
$cat_meta = get_option("cat_meta_data")[$cat->term_id];
?>
<h1 class="pageTitle"><?php echo isset($cat_meta) ? $cat_meta : single_cat_title(); ?></h1>

まず$cat_dataにカテゴリー情報を読み込ませ、$cat_metaに「get_option(“cat_meta_data”)[$cat_data->term_id];」で先程設定したカテゴリー見出しタグ情報を収納します。

あとはh1の中でカテゴリー見出しタグ情報が設定されているかどうかを確認し、カテゴリー名かカテゴリー見出しタグのどちらかを出力します。

wordpressの記事投稿画面を使いやすくカスタマイズするプラグイン「aoringo post ui costomize」

wordpressの記事投稿画面はシンプルで触りやすくはあるのですが、個人的にはエディター部分とカテゴリー部分をもうちょっと弄りたい感じです。

というわけで投稿画面をカスタマイズできるプラグインを作製しました。

コードに関しては、大部分を→解決!WordPress投稿画面のカテゴリーをカスタマイズする方法 | 株式会社LIGさんから引用しました。

その名も「aoringo post ui costomize」です。

エディタの高さ幅とカテゴリー一覧を弄る事ができます。

エディタ高さ最低幅

なんのプラグインの影響か、エディターの縦幅が狭い時があるんですよね。というわけで強制的に高さを設定できます。

数値を入力すれば、

うひょひょーいひろーい

 カテゴリー一覧

カテゴリー一覧関係は色々ありますよ。好みによって設定してあげてくださいね。

高さ制限解除

カテゴリーリストの高さ制限を解除しちゃいます。どこまでも伸びます。沢山カテゴリーがあるとあの小さな枠では大変ですからね。

 並べ変え禁止

カテゴリーを設定すると並び順を無視して設定された項目が一番上にきますね。それを禁止しちゃいます。

こんな感じです。

ラジオボタン化

カテゴリーの選択をチェックボックスからラジオボタンに変更します。カテゴリーを複数登録したくない人はどうぞ

最下層カテゴリのみ選択可

親子関係にあるカテゴリの、最下層のカテゴリだけを選択できるようになります。

開閉式

カテゴリーの親子関係のうち、子を非表示にしてクリックで開閉できるようにします。

親子色分け

カテゴリーの親子で簡単に色分けします。

 ダウンロード

割と適当コードなので、設定によってはCSSが崩れます。適当に修正してください。

ダウンロード

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と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ですね!

wordpressのエディター表示をcssによって変更する方法

wordpressのエディタはとても便利ですが、エディタでの編集時と実際に投稿後ではデザインが変わる事が多々あります。

エディタとブログ上で適応されるcssが違うわけですね。というわけで、エディタ画面で利用できるcssを作りましょう。

テーマによっては既に用意されてる場合もある

「editor-style.css」というファイルがテーマフォルダに入ってますか? 入っているなら既にエディター用のcssが設定済みです。直接このファイルの内容を変更していけばOKです。簡単ですね。

用意されてない場合

さて、入っていない場合です。この場合、cssファイルを追加してもwordpressは認識しません。function.phpにコードを一行追加しましょう。

add_editor_style('editor-style.css');

これでエディターでcssファイルを利用する事が出来ますよ!