kdcsライブラリー

トップページに設置するslickスライダーはデフォルトでは使用する画像の縦横比で変化するので横長長方形画像ではスマートフォン表示の場合は立幅が小さい長方形になってしまう。

cssでスマホ時の高さを固定する
※画像の中央部のみの表示になる

.slider-item::before {
  content: "";
  display: block;
  padding-top: 380px;
  }
.slick-box img {
  max-width: initial;
  width: auto;
  min-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  }

padding-topの数値で高さを決める

パラメーターのurlやtemplate_urlは今のところ利用できるが非推奨

<?php bloginfo('url'); ?>

home_urlを使用

<?php echo home_url(); ?>

<?php bloginfo('template_url'); ?>

get_template_directory_uri()を使用

<?php echo get_template_directory_uri(); ?>

※WordPress コアファイルが置かれている位置を取得するのはこちら

<?php echo site_url(); ?>

カテゴリーページやアーカイブページで投稿の一覧表示する場合にカテゴリー別のランキングを表示する方法

※必要なページに表示させたい場合は1行目でカテゴリーページの指定を行う
※welcart絡みの場合、別途function.phpに商品のメイン画像を取得して表示させる記述が必要

<?php if(is_category(array('cat_name1','cat_name2','cat_name3','cat_name4'))): ?>
<div id="ranking">
<?php
if ( function_exists( 'wpp_get_mostpopular' ) ) {
	// カテゴリー、又はタグ名を格納する変数を定義
	$term_name = NULL;
	// 投稿ページの場合
	if( is_single() ){
    	$cat       = get_the_category();
  		$term_id   = $cat[0]->term_id;
  		$term_name = $cat[0]->name;
    	// カテゴリー別の記事ランキングを表示するためのパラメータを指定
		$term_arg  = array(
    		// カテゴリーidを指定
			'cat' => $term_id,
		);
	// アーカイブページの場合	
	}elseif( is_category() || is_tag() ){
        $obj       = get_queried_object();
        $taxonomy  = $obj->taxonomy;
        $term_id   = $obj->term_id;
        $term_name = $obj->name;
		// カテゴリーまたは、タグ別の記事ランキングを表示するためのパラメータを指定
		$term_arg  = array(
        	// タクソノミーを指定
    		'taxonomy' => $taxonomy,
            // タームidを指定
    		'term_id'  => $term_id,
		);
	}
	
	// 共通するパラメータを指定
	$arg = array (
    	// 記事を表示する最大件数
		'limit'     => 5, 
        // 集計期間。 daily, weekly, monthly, all のいずれかを指定
		'range'     => 'weekly', 
        // ソート順の対象。 views(閲覧数), comments(コメント数), avg(1日の平均）のいずれかを指定
		'order_by'  => 'views',
        // ポストタイプを指定。post, page, などを指定
		'post_type' => 'post',
	);
	
	// カテゴリー、又はタグ名を取得した場合
	if( $term_name ){
		// カテゴリー、又はタグ別の記事ランキング表示するためのパラメータを結合
		$arg = array_merge( $term_arg, $arg); 
		echo "<h3>" . esc_html( $term_name ) . "のアクセスランキング</h3>";
	}else{
		echo "<h3>アクセスランキング</h3>";
	}	

	wpp_get_mostpopular( $arg );
}
?>
</div><!--/ranking-->

参考：https://blog-and-destroy.com/6847

セットする画像の縦横幅がバラバラの時の対処法は二つ

1.slickのoptionで設定

adaptiveHeight:true,

このオプションをtrueで実行するとスライドの高さが画像に合わせて自動で可変する
※スライダー以下、上下に動くのでよろしくない・・・

2.CSSで高さとobject-fitを指定する

.slider img {
width: 100%;
height: 50vw;
object-fit: cover;
}

※IEがobject-fitに未対応

IEだけ別css（この場合、heightをvwからautoにする）

@media screen\0 {
  .slider img {
    height: auto;
  }
}

人気記事プラグイン「WordPress Popular Posts」をオリジナルテーマ内に表示させる方法

※「wp_head」必須
WordPress Popular Postsは設定をデフォルトのまま使うとサイトが重くなってしまうので
各種設定変更が必要。

ログ上限：を無効をデータ保存期間に変更（初期設定180日）
データキャッシュ：キャッシュする
データサンプリング：無効を有効に変更（アクセスの少ないサイトは無効で様子見）

記事を表示させたい場所に以下を記述

<?php $args = array(
    'post_type' => 'post',
    'limit' => 5,
    'range' => 'all',
    'order_by' => 'views',
    'title_length' => 25,
    'thumbnail_width' => 80,
    'thumbnail_height' => 80,
    'stats_views' => 1,
    'stats_date' => 1,
    'stats_date_format' => 'Y/m/d',
    'stats_category' => 1,
    'wpp_start' => '<ul>',
    'wpp_end' => '</ul>',
    'post_html' => '<li><a href="{url}">{thumb_img}{text_title}<br>{views}</a></li>'
);
wpp_get_mostpopular($args );
?>

基本パラメーター

post_htmlのパラメーター