【DOM】jQureyでリストないの改行箇所のみ行間を狭くする

■目的
liタグに設定したline-heightが改行した際にも適用され、1つの項目が2つ分の高さになるので、行間を狭め1つの項目だとわかりやすくする。

■ポイント
・改行になるテキストの長さを取得
・その長さをブレイクポイントに条件式でcssの適用を変える

■jQurey

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>
$(function(){
    var $setElm = $('#demo li a'); //リスト内の文字があるセレクタを指定
    var changeLineheight = '10';   //1行に入る文字数を入れる

    $setElm.each(function(){
       var textLength = $(this).text().length;
       
       if(changeLineheight < textLength){
       $(this).css('line-height','1.35'); // 改行なし(liタグ全体)の行間の高さ

       }else if(changeLineheight > textLength){
          $(this).css('line-height','1.95'); //改行する部分の行間の高さ

        }
    });
});

</style>

■HTML&CSS

<ul id="demo">
  <li><a>デモデモデモデモデモ</a></li>
  <li><a>デモデモデモデモデモデモ</a></li> <!-- 改行がある(10文字以上)のでここだけ行間変更される -->
  <li><a>デモデモデモデモデモ</a></li>
  <li><a>デモデモデモデモデモ</a></li>
  <li><a>デモデモデモデモデモ</a></li>
</ul>

bxslider 両サイドに前後の画像を表示させる方法

■ポイント
・スライダーの親要素(表示させたい範囲)に overflow:hidden;をかける
※これをしないと横スクロールバーがでる。
・スライダーの中は両側の画像を表示させるため、overflow:visible;をかける

下記はjQueryの導入方法など省略しています。

■HTML

<div id="bx-wrapper">
   <div id="bx-viewport">
      <ul class="bxslider">
        <li><img src="/images/pic1.jpg" /></li>
        <li><img src="/images/pic2.jpg" /></li>
        <li><img src="/images/pic3.jpg" /></li>
        <li><img src="/images/pic4.jpg" /></li>
      </ul>
  </div>
</div>

■CSS 追加分

#bx-wrapper{
   overflow:hidden; /* 画面幅からでないように */
   width:100%;   /* 幅100%の場合 */
   height:400px;  /* 画像の高さと同じ */
}
#bx-viewport{
  overflow:visible!important; /* 両サイドに前後の画像を表示させる */
  width: 1000px;              /* 画像の幅(表示させる幅) */
  height:400px;               /* 画像の高さ(表示させる高さ) */
  margin: 0 auto;             /* 画面中央にする */
}
.bxslider li{
  width;1000px;  /* 画像サイズと同じ(画像をくっつけて表示させる場合) */
}

参考:bxsliderで両サイドに画像を表示させて横スクロールさせない

WP:任意のページ名で投稿一覧を作成

投稿の一覧ページを手軽に増やしたい、という時ありますよね。
そんなときはfunctuions.phpに下記を追加しましょう。

/*
 * 投稿にアーカイブ(投稿一覧)を持たせるようにします。
 * ※ 記載後にパーマリンク設定で「変更を保存」してください。
 */
function post_has_archive( $args, $post_type ) {
	if ( 'post' == $post_type ) {
		$args['rewrite'] = true;
		$args['has_archive'] = 'blog'; // ページ名
	} 
	return $args;
}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );

‘blog’の部分は好きな名前にしてください。
これで任意のページURLの投稿一覧(アーカイブ)ページが作れました。

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