jQueryでチェックがついたラジオボタンの親要素を指定する

スライド開閉式のコンテンツなどで、特定の要素だけは開いた状態にしておきたい時などに利用する。

たとえばこのようなコンテンツがあったときに、単純なスライドだとリロードすると全て閉じた状態になってしまう。

ドキュメントの用意が終わった段階で、チェックがついたラジオボタン要素の親を表示したままにするのは下記コードを利用する。

jQuery('親要素:has(子要素)')

has()で囲われた要素を親に持つ要素を対象にする事が出来る。

jQuery('ul.children:has(input:checked)').css("display", "block");

今回の場合はこのようにした。リストのチェックが入ったラジオボタン要素を親に持つ「ul.children」を全てdisplay情報の変更といったところか。

wordpress記事投稿画面のカテゴリー一覧を開閉式にする

大量のカテゴリーを抱えているブログは多いと思います。記事投稿の時って大変ですよね。分かります。分かりますよ!!!!

というわけで投稿画面のカテゴリー一覧を開閉式にしちゃいましょう。まずはカテゴリー一覧部分をカスタマイズします。

今回の記事はこの記事の続きからとなります。→wordpress投稿画面のカテゴリーメタボックスを変更する » aoringo works

というわけでwordpressのカテゴリー一覧を開閉できるように頑張っていきましょう!

 

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 . ']';
//親カテゴリの時はチェックボックス表示しない
// print_r($category);
$cat_child = get_category_children($category->term_id);
$class = $category->parent == 0 ? ' class="category_parent"' : ' class="category_child"';
if($category->parent == 0) {
$class = ' class="category_parent"';
} elseif($cat_child !== "") {
$class = ' class="category_child"';
} else {
$class = null;
}
if($cat_child !== "") {
$output .= "n<li id='{$taxonomy}-{$category->term_id}'>" . "<span$class>" . esc_html(apply_filters('the_category', $category->name)) . "</span>";
} 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>';
}
}
}

ちゃちゃっとコードを見ていきましょう。前回からコードが少しだけ変わりました。まず、スライドをするためにカテゴリー名である「esc_html(apply_filters(‘the_category’, $category->name))」をspanタグで囲みます。

spanタグの中身である「$class」は親か子供がいるかで「class=hogehoge」が入るようになってます。

この時点ではまだこんな感じ。前回と見た目は変わりません。

<li id = 'category-4' ><span class="category_parent" > エンタメ</span ><ul class='children' >
<li id = 'category-293' ><label class="selectit" ><input value = "293" type = "radio" name = "post_category[]" id = "in-category-293" /> 音楽</label ></li >
<li id = 'category-3' ><span class="category_child" > 本</span > <ul class='children' >
<li id = 'category-14' ><label class="selectit" ><input value = "14" type = "radio" name = "post_category[]" id = "in-category-14" /> 書籍</label ></li >

ソースがしっかりと書き換わっているかどうか確認もしておきます。

次に、投稿画面にjavascript記述を追加し、jQueryによるスライド機能を追加します。

function post_output_css() {
$pt = get_post_type();
if($pt == 'post') { //投稿の場合はpost
?>
ul.children{ display :none; }

</style>
<script>
jQuery(document).ready(function () {
jQuery('#categorychecklist ul.children:has(input:checked)').css("display", "block");
//クリックイベント
jQuery('.category_parent,.category_child').click(function () {
jQuery(this).next('.children').stop(true, true).slideToggle();
});
</script>
<?php
}
}

add_action('admin_head', 'post_output_css');

span「category_parent」もしくは「category_child」がクリックされると、同じレベルにある次のulクラス「children」のカテゴリーが開閉します。この時ul.childrenはcssによりデフォルト非表示に。

そんなわけでこんな感じにコンパクトになりました! 素敵ですね。

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」とは併用できません。

ダウンロード

色々な画像形式でフラットデザインなアイコンが大量にダウンロードできる「flaticon」

Free vector icons | SVG, PSD, PNG & Icon Font | Thousands of Free Icons

四万件もの画像素材を大量に収集していて、とても便利だ。

ビールで検索しただけでこれだけ大量のフラットデザインなアイコンにヒットする。

欲しいアイコンはクリックしていくと、右上の「download icons」にたまっていく。

あとは欲しい画像形式で取得するだけだ。

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」です。このファイルの中に記事一覧出力のための記述が一式入っています。

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

サイトの改修を始めましたよ!!

どれくらいの改修になるかはわかりませんが、改修、始めます。

手始めとしてインデックスから手を着けています。

最新記事一覧と人気記事を両方表示するようにして、概要文章をかなり省略、画像を大きめ、色分けして分かりやすくしてみました。

しばらくは改修のために行うあれやこれやの記事ばかりになると思いますが、別にテスト環境でいじるでなしに、普通に本番環境で弄っていくと思います。(やめろ