kdcsライブラリー

CSS の object-fit プロパティは、画像（imgタグ）や動画（videoタグ）などの中身をdiv要素のボックス内にどのようにはめ込むかを設定できるが、IEには非対応・・・
そこでjavascriptで対応させる方法。

※object-fitは要素のコンテンツボックス内で画像をコントロールしトリミング等の効果を簡単に表現できる

利用するJSファイルは「object-fit-images」
javascriptの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>

cssファイルのobject-fit-imagesを適用したいセレクターに以下を記述
通常のobject-fitの下に記述し、値を揃える。
例：cover

    object-fit: cover;
    /* IE対策 */
    font-family: 'object-fit: cover;';

※safariは未検証

slickスライダーに動画（mp4）を含めてスライドさせる。

1. 動画は1番目に配置し、再生中はスライドを止める。
2. 動画の再生が終了したら自動スライド開始。
3. 画像スライド中に動画を巻き戻す。（動画の先頭から再生させるため）

以下、javascriptのスライダーオプション記述
オプション設定ではautoplay:falseにしておく

//slick メインスライダーオプション -------------------------
    var theVideo = document.getElementById('theVideo');

    $('.slick-box').on('init', function(event, slick, currentSlide){
	    theVideo.play();
});

$(function() {
	$('.slick-box').slick({
		infinite: true,
		dots: false,
		arrows: true,
		prevArrow: '<button type="button" class="slick-prev"><</button>',
		nextArrow: '<button type="button" class="slick-next">></button>',
		slidesToShow: 1,
		slidesToScroll: 1,
		adaptiveHeight: false,
		autoplay: false,
		fade: true,
		speed: 2000,
		autoplaySpeed: 7000,
        pauseOnFocus: false
	});

    document.getElementById('theVideo').addEventListener('ended',myHandler,false);

        function myHandler(e) {
            $('.slick-box').slick('slickGoTo',1);
			$('.slick-box').slick('slickPlay');
		}

    $('.slick-box').on('afterChange', function(event, slick, currentSlide){

	    if (currentSlide == 0) {
		    $('.slick-box').slick('slickPause');
			theVideo.play();
        } else {
            theVideo.pause();
            theVideo.currentTime = 0;
		}
    });
});

videoタグには「playsinline muted」を記述。（autoplayは含めない）

html5

<?php /* slickスライダーここから---------------------------------------------------------- */ ?>
<div id="slickSlider">
<div class="slick-box">
<div id="slider-1" class="slider-item">
<div class="caption inner">
<div class="catch">動画キャッチタイトル</div>
<div class="catch2">キャッチコピー1行目<br>キャッチコピー2行目</div>
</div><!--/.caption-->
<video id="theVideo" playsinline muted>
<source src="<?php echo get_template_directory_uri(); ?>/images/slick/movie2.mp4">
</video>
</div><!--/#slider-1-->
<div id="slider-2" class="slider-item">
<img class="slickImage2" src="<?php echo get_template_directory_uri(); ?>/images/slick/slick_img03.jpg" alt="画像２" title="">
<div class="caption inner">
<div class="catch">画像1キャッチタイトル</div>
<div class="catch3">キャッチコピー</div>
</div><!--/.caption-->
</div><!--/#slider-2-->
</div><!--/.slick-box-->
<div class="slickslider-filters"></div>
</div><!--/#slickSlider-->
<?php /* slickスライダーここまで---------------------------------------------------------- */ ?>

WordPress 5.4のログイン画面では入力フォームに外枠線が入ったり、ログインエラー時のシェイクが従来のカスタマイズ（function.php）では制御できなくなっていたので修正。

シェイクはjavascriptではなくcssのanimationで実装されているのでfunction.php内に以下のcssを記述

body.login div#login #loginform.shake { animation: none;transform: none; }

従来の「ログインエラーのシェイクを止める」を削除

//ログインエラーのシェイクを止める -------------------------------------------------------
function stop_login_error_shake() {
	remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'stop_login_error_shake' );

function.phpの管理画面用css

//ログイン画面のカスタマイズ -------------------------------------------------------------
    function my_custom_login() { ?>
    <style type="text/css">
    body.login div#login { background: #fff url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo_login.png) no-repeat left center; }
    body.login div#login { width:680px;padding:10px 0 0 0;margin:100px auto 0 auto;}
    body.login div#login { border:solid 1px #e4e4e4;border-radius: 10px;}
    body.login div#login h1 { display:none;}
    body.login div#login #loginform { width: 320px; margin:0; padding: 5px 10px 10px 10px;position:relative;left:330px;box-shadow:none;border: none;}
    body.login div#login #loginform.shake { animation: none;transform: none; }
    body.login div#login p#nav {margin: 0;}
    body.login div#login p#nav a,
    body.login div#login p#backtoblog a { display: none; }
    body.login div#login #login_error a { display:none; }
    body.login div#login p.message { margin-left: 8px; }
    body.login div#login_error { margin: 0 10px; padding: 5px 10px; text-align: center; border: 1px solid #dd3d36; box-shadow:none; }
    body.login .message { margin: 0 10px; padding: 5px 10px; text-align: center; border: 1px solid #2ea2cc; box-shadow:none; }

@media screen and (max-width:670px) {
    body.login div#login h1 { display:block;height: 160px; width:320px;background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo_login.png) no-repeat 0 0;}
    body.login div#login h1 a { display:none; }
    body.login div#login { width:320px;}
    body.login div#login { background-image:none; background-color: #fff; }
    body.login div#login #loginform { width:300px; padding: 5px 10px 10px 10px;position:relative;left:0px; box-shadow:none;}
 }
    </style>
    <?php }
    add_action( 'login_enqueue_scripts', 'my_custom_login' );

動画を圧縮できるサイトVideoSmallerはこちら

Language▼をクリックして日本語化する

動画ファイルを選択しアップロードボタンをクリック

しばらくすると完了（Completed）し圧縮された動画がダウンロードできる

テストした動画（1920×1080 25秒）は54.59MB → 13.91MBに圧縮された

カテゴリーページやアーカイブページ他、条件分岐で指定したカテゴリー内でそのカテゴリー記事のランキングを表示させる

<?php $cat = get_the_category(); ?>
<?php $cat_id = isset( $cat[0] ) ? $cat[0]->term_id : ''; ?>
<?php if ( function_exists( 'wpp_get_mostpopular' ) ) : ?>
<?php $args = array( 
  'limit' => 12,
  'range' => 'all',
  'order_by' => 'views',
  'thumbnail_width' => 100,
  'thumbnail_height' => 100,
  'cat' => $cat_id,
  'wpp_start' => '<ul>',
  'wpp_end' => '</ul>',
  'stats_views' => 1,
  'post_html' => '<li><a href="{url}">{thumb}</a><a href="{url}">{text_title}</a><span>{stats}</span></li>' ); ?>
<?php wpp_get_mostpopular( $args ); ?>
<?php endif; ?>