kdcsライブラリー

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

トップページに設置する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の数値で高さを決める

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

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をフックに使用

※画像表示について
アイキャッチ画像がある場合はアイキャッチ画像を表示。
アイキャッチ画像が無い場合は記事内の最初の画像を表示。
アイキャッチ画像も記事内の画像も無い場合はデフォルト画像を表示させる。
(続きを読む…)

divタグで囲った画像の下部に出る微妙な余白を無くす方法。

画像はインライン要素なのでベースラインをvertical-alignをbottom（下端揃え）にすると下の余白が無くなる
vertical-align: bottom;

img{
margin: 0;
padding: 0;
vertical-align: bottom;
}

または、display: block;

img{
margin: 0;
padding: 0;
display: block;
}

display:blockで画像をブロック要素にするとtext-alignでの中央寄せが効かなくなるので中央寄せしたい時はmargin: 0 auto;を指定する必要がある。