kdcsライブラリー

カスタム投稿タイプで複数のカテゴリーを使用する場合のカテゴリー名取得と表示
※ループの中に記述する

<?php
  if($terms = get_the_terms($post->ID, 'staffblog_category')) {
     foreach ( $terms as $term ) {
         echo esc_html($term->name);
        }
}
?>

jQuery使います。

<div id="content">
<div id="contentArea" class="inner">
<div id="main">
メインエリア
</div><!--/#main-->
<div id="aside">
<div id="asideBox">
サイドバー
</div><!--/#asideBox-->
</div><!--/#aside-->
</div><!--/#contentArea-->
</div><!--/#content-->

(続きを読む…)

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' );