WP:カスタムスニペット集 其の一

制作メモとして、テーマカスタマイズに頻出のスニペット集をここに記します。
今回はカテゴリー、カスタムタクソノミーの一覧表示について。

1.「子カテゴリーまで含めたカテゴリー一覧の出力」

<?php $children = get_category_children($cat); ?>
              <?php if($children) : ?>

                <?php
                $cats_id = get_category_by_slug($category_name)->term_id;
                $args = array('orderby' => 'name', 'order' => 'ASC','child_of' => $cats_id,'hide_empty'=>'0' );
                $categories = get_categories($args); ?>

                <ul>
                <?php foreach($categories as $category){
                   echo '<li><a class="style01" href="' . get_category_link( $category->term_id ) . '" title="' . $category->name . '" ' . '>' . $category->name . '(' .$category->count . ')' .'</a></li>';
                } ?>
                </ul>

2.「カスタムタクソノミーのターム一覧の出力」

<ul><?php wp_list_categories(array('title_li' => '', 'taxonomy' => 'タクソノミー名','hide_empty' => 0)); ?></ul>

3.「カスタムタクソノミーで子カテゴリー一覧を出力」

<?php
  $categories = get_terms( 'カスタムタクソノミー名', 'hide_empty=0&parent=' . get_queried_object_id() );
  if($categories) {
?>
  <ul>
<?php
    foreach($categories as $value):
?>
    <li><a href="<?php echo get_term_link($value); ?>"><?php echo $value->name . "(" . $value->count . ")"; ?></a></li>
<?php endforeach;
    } ?>
  </ul>

server:さくらサーバーでphpを動かす

ヘッダー等の共通部をphpインクルードで静的HTMLに読み込ませていたのですが、
さくらサーバー環境でphpを動かすには、特別に対処が必要でしたので、備忘録として残します。

まず、phpを動かすために「.htaccess」「php.cgi」を作成します。

中身はそれぞれ下記のように記述します。

.htaccess

Action myphp-script /php.cgi
AddHandler myphp-script .php .html

マルチドメインでサブディレクトリに設定する場合は、

Action myphp-script /サブディレクトリ名/php.cgi
AddHandler myphp-script .php .html

php.cgi

#!/bin/sh
exec /usr/local/bin/php-cgi

これで何とか動きました…。

今回、サブディレクトリにphp.cgiを作成する必要があったのですが、cgiのパス指定で躓きました。
てっきりドメインのルートからのパスを指定するものだと思っていたのですが、、

ここが間違っていると、404エラーとなり、indexのパスが下記のような読み込まれ方をします。

ディレクトリ名/php.cgi/index.html

さくらサーバーさん、なかなか曲者です。

CSS : selectbox

セレクトボックスの装飾に独自のスタイルを当てる方法です。
まずはブラウザがデフォルトで付けているスタイルを無効化します。

select {
	width: 100%;
	padding: 10px;
	-webkit-appearance: none; /* Chrome,Safari */
	-moz-appearance: none; /* Firefox */
	appearance: none; /* その他 */
	border: 1px solid #999;
	background: #eee;
	background: url(arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: url(arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 20px, 100%;
}

IEの場合には下記のように記述します。
※IE10では有効ですが、IE9,IE11では上手く効かないようです。

select::-ms-expand {
	display: none;
}

近く、WindowsVistaのサポートが切れ、Vistaの標準ブラウザである、
IE9をサポート外とする制作会社も増えてくると思いますが、
IE10、11も癖がありますので、対応にはまだまだ悩まされそうですね。

WP:記事内の画像をアイキャッチ化

外部のブログからWordpressに引越しする際、一覧ページにサムネイルを出したいのに、
アイキャッチ画像が登録されていないケースがあります。
記事が少なければ手動でアイキャッチを登録しても良いのですが、
そうはいかない場合の対処法です。

まずはfunctions.phpに下記の記述を追加しましょう。

/*
 * 記事内で使われている最初の画像を取得。
 * ※ 記載後にパーマリンク設定で「変更を保存」してください。
 */
function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
 
if(empty($first_img)){ //Defines a default image
        $first_img = "https://placehold.jp/bdbdbd/ffffff/226x147.png?text=NO%20IMAGE";
    }
    return $first_img;
}

次に、ループ内のサムネイル出力部分に下記を記述します。

<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>">

これで、記事内の1枚目の画像がアイキャッチとして一覧に出てくれます。
めでたしめでたし。

WP:ユーザー権限グループ

WordPressにはログインユーザーに対して、段階的に権限が設定されています。
今回はそのユーザー権限グループについてまとめます。

まず、ユーザー権限の種類には下記の5種類があります。

1.購読者ユーザー(subscriber)
2.寄稿者ユーザー(contributor)
3.投稿者ユーザー(author)
4.編集者ユーザー(editor)
5.管理者ユーザー(administrator)

例えば、購読者は閲覧のみで、記事の新規投稿や編集ができません。

しかし、functions.phpに設定を記述することで、
権限を追加削除することが可能です。

「寄稿者」にファイルアップロードの権限を追加する場合は下記のように記述します。

function add_theme_caps(){
	$role = get_role( 'contributor' );
	$role->add_cap( 'upload_files' );
}
add_action( 'admin_init', 'add_theme_caps' );

逆に、権限を削除する場合の記述は

function remove_theme_caps(){
	$role = get_role( 'contributor' );
	$role->remove_cap( 'upload_files' );
}
add_action( 'admin_init', 'remove_theme_caps' );

3行目の権限には様々な種類があります。

詳しくは下記を参照してください。

WordPress Codex 日本語版

また、プラグインで設定する方法もあります。

よく使われるものだと、「User Role Editor」というプラグインが便利です。

User Role Editor

案件でも、クライアント様の要望に合わせてユーザー権限を細かく設定する事がよくあります。

短時間で対応するには、やはりプラグインが便利ですね。

WPプラグイン:WP-PageNavi

今回はWPの投稿に簡単にページ送りボタンを追加できるプラグイン
「WP-PageNavi」をご紹介します。

まずは下記からダウンロードしましょう。公式プラグインですので、管理画面からも追加可能です。
https://ja.wordpress.org/plugins/wp-pagenavi/

インストールが完了したら、管理画面の「設定」から詳細設定が可能です。

テーマに設置する際は、下記を設置した箇所にペーストしてください。

<?php wp_pagenavi(); ?>

もし上手く動かない、表示されないという方がいたら、
まずは管理画面の「設定>表示設定」で1ページに表示する記事数を確認してください。

また、固定ページにWP_Queryを使ってサブループを作成している場合には、
wp_pagenaviにサブループの情報を引数で渡してあげる必要があります。

<?php
 $paged = get_query_var('paged'); //ページ数を取得
 $arg = array(
    'post_type' => 'post', //カスタム投稿の場合は変更してください
    'posts_per_page' => 10, //1ページに表示する投稿数
    'order' => 'DESC', //降順
    'paged' => $paged //ページ数を取得
	);
 $my_query = new WP_Query($arg);
    if($my_query->have_posts()): 
?>
   
   <ul>
   
    <?php while($my_query->have_posts()) : $my_query->the_post(); ?>

         <li><a href="<?php the_permalink(); ?>"><span class="post-date"><?php the_time('Y.m.d'); ?></span><span class="post-list-title"><?php the_title(); ?></span></a></li>

    <?php endwhile; ?>
    <?php else : ?>
      <li><p>見つかりません。</p></li>
    <?php endif; ?>
     </ul>
     <?php wp_pagenavi(array('query' => $my_query)); ?> //サブループを引数で渡す
      <?php wp_reset_postdata(); ?>

これで恐らくちゃんと動くはずです。

他にうまく動かないケースとしては、固定ページにループを記述している場合に、
カスタム投稿名と、固定ページのスラッグが同じだと正しく動作しませんでした。

また、固定フロントページの場合にも、ページ数取得箇所の記述に違いがあります。

$paged = get_query_var('page'); //固定フロントページでページ数を取得

ここまで確認すれば大抵の環境で動作するはずです。

:first-child :first-of-type, :nth-child(), :nth-of-typeなど

■1番最初の子要素に適用
:first-child

■1番最後の子要素に適用
:last-child

■親要素の中に他の子要素があっても、適用するセレクタの1番最初の子要素に適用
:first-of-type

■親要素の中に他の子要素があっても、適用するセレクタの1番最後の子要素に適用
:last-of-type

■n番目の子要素に適用(子要素の種類は問わず上から数えてn番目の子要素につく)
:nth-child(n)

■親要素の中に他の子要素があっても、適用するセレクタのn番目の子要素に適用
:nth-of-type(n)

■参考  http://www.vanfu-vts.jp/blog/2014/09/first-child_last-child/

■参考 http://www.htmq.com/selector/first-of-type.shtml

Google Shortener で短縮URL作成

■長いURLを短く変換する短縮URL
・Google Shortenerでは
http://4koma-web.com/coding/
↑を変換すると↓のようになります。
https://goo.gl/sVb2GL

リンク先がわからなくなるので、長すぎるもの以外は使わない方がよいと思います。

■Googleアカウントにログイン
ログインしなくても使えますが、いちいち認証が必要なので、数が多いと面倒くさいです。
ログインすれば、認証がなくなります。

display:inline-blockでできる隙間を消す方法

■floatの代わりに使う機会が増えてきたdisplay:inline-block

・display:inline-blockは
1.block要素のようにwidthやheight、paddingやmarginの設定ができる。
2.inline要素のように横並びにできる

■display:inline-blockできれいに横並びにならないとき

例えば
display:inline-block;
height:400px;
width:50%;
border:1px solid #000;
box-sizing:border-box;

の要素を2つ並べてもこのままでは段落ちしてしまいます。

■横並びにするには
1.htmlを修正する

<ul>
  <li>幅50%</li>
  <li>幅50%</li>
</ul>

上記のようになっていると段落ちしてしまいます。
これを、

<ul>
  <li>幅50%</li><li>幅50%</li>
</ul>

このようにくっつけます。
display:inline-blockにすると改行部分の情報が空白になるようです。

2.cssを修正する

親要素のulにletter-spacingを-で設定します。

ul {
  letter-spacing: -0.5em;
}

※このままではliの表示が崩れるので、必ずletter-spacing:normalを追加する事が大切です。

li{
  /* ↓追加します */
  letter-spacing: normal; 
}

■参考display:inline-block;でできた隙間をなくす4つの方法 | webledge