カテゴリー別アーカイブ: カスタマイズ

wordpressのカスタマイズに関する記事をここに集めています。wordpressでは出来る事が大量にあり、その作業量も膨大になります。自分好みの機能を備えるためにカスタマイズしていきましょう。

wordpress現在のカテゴリーページのアドレス・パーマリンクを取得する方法

wordpressで現在のページを取得する、という関数は実はありません。フロントページならフロントページ、投稿なら投稿のパーマリンク取得関数を利用しないと行けません。

カテゴリーページのパーマリンクを取得するのに少し手間取ったのでメモっておきます。

カテゴリーページのパーマリンク取得

カテゴリーページのパーマリンクを取得するには「get_category_link」を使用します。

    $url     = get_category_link('cat_ID');

カテゴリーIDを指定する事でパーマリンクを取得することが出来ます。

カテゴリーページを表示中なら、グローバル変数の「$cat」にカテゴリーIDが収納されていると思うので、カテゴリーページで現在のパーマリンクを取得したい場合は、

  if(is_category()) {
    $url     = get_category_link($cat);
  }

とでもすればいいかと思います。

wordpressの記事投稿ページ以外のカテゴリー編集ページなどにビジュアルエディターを表示する

ちょっと特殊な運用ですが、記事投稿画面以外でビジュアルエディターを追加したい場合があると思います。今回はその方法をお教えしますよ。

参考にしたのはこちら→WordPress Snippet | WordPress3.5 エディタ付フィールドを投稿の編集に追加する

<?php
$args = array(
'textarea_rows' => 20,
'teeny' => false,
'quicktags' => true,
);
echo '<input type="hidden" name="exp_editor_field" id="exp_editor_field" />';
wp_editor($text, 'exp_editor', $args);
?>

「$args」にビジュアルエディターの条件を入れます。「textarea_rows」が縦軸の大きさですね。
「inputタグ」は実際にエディターが表示される場所です。
「wp_editor($text, ‘exp_editor’, $args);」でビジュアルエディターを呼び出します。「$text」には表示するコンテンツ内容が入ります。「exp_editor」は、$_POSTで飛ばすときの変数名です。

受け取るときは、$_POST[‘exp_editor’]で受け取る事が出来ます。

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記事投稿画面のカテゴリー一覧を開閉式にする

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

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

今回の記事はこの記事の続きからとなります。→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にログインしている人を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」です。このファイルの中に記事一覧出力のための記述が一式入っています。

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

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その1

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

もいもい!!

ブログをリニューアルしようと思います!

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その1