kdcsライブラリー

以下の記述で簡単に行える

動作させたい要素にクラスを付加する

<div class="fadeUp">
<!-- フワっとフェードインさせたい要素 -->
</div>

javascript

$(window).scroll(function () {
  var scrollAnimationElm = document.querySelectorAll('.fadeUp');
  var scrollAnimationFunc = function () {
    for (var i = 0; i < scrollAnimationElm.length; i++) {
      var triggerMargin = 100;
      if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
        scrollAnimationElm[i].classList.add('on');
      }
    }
  }
  window.addEventListener('load', scrollAnimationFunc);
  window.addEventListener('scroll', scrollAnimationFunc);
});

css

/*----------------------------
fadeUp ｜下から上へ出現
----------------------------*/
.fadeUp {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
fadeLeft ｜左から出現
----------------------------*/
.fadeLeft {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeLeft.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
fadeRight ｜右から出現
----------------------------*/
.fadeRight {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeRight.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

Instagramの投稿画像をWordPress記事内に「埋め込みコード」を利用して貼り付けることができるが、このコードにはjavascriptも含まれる。WordPressでは管理者または編集者以外は記事にjavascriptを貼り付けることができない仕様になっているため、ユーザー権限が「投稿者」の場合、記事内のjavascriptは削除されてしまう。

権限をカスタマイズすることによってこの問題は解決できるが、セキュリティーリスクが高くなってしまう。

そこでInstagramの埋め込みコードにあるjavascriptをfooterに記述して使えるようにしておく。
記事ページ以外は関係ないので条件分岐でsingleだけにしておく。

<?php if ( is_single() ) : ?>
<script async src="//www.instagram.com/embed.js"></script>
<?php endif; ?>

特定のカスタム投稿記事に適用する場合
※例：イベントページ（スラッグ = event）

<?php if ( is_singular('event')): ?>
<script async src="//www.instagram.com/embed.js"></script>
<?php endif; ?>

複数のカスタム投稿記事に適用する場合

<?php if ( is_singular( array('event','xxxx')): ?>

WordPressのデフォルトでは管理者と編集者以外、記事内にjavascriptを使うことができない。
※入力しても強制削除される

権限のカスタマイズでjavascriptが入力できるようにする
※投稿者のユーザー情報が漏れるとセキュリティーリスクが伴う

functions.phpに記述

function add_theme_caps(){
    $role = get_role( 'author' );
    $role->add_cap( 'unfiltered_html' );
}
add_action( 'admin_init', 'add_theme_caps' );

get_roleで指定できる権限グループは以下になります。

管理者 : administrator
編集者 : editor
投稿者 : author
寄稿者 : contributor
購読者 : subscriber

トップページで見せるメインビジュアルスライダーの画像や動画の上にメッシュを重ねる方法

html

<div class="slider">
<img src="./images/slide-image.jpg">
</div><!--/.slider-->

css

.slider {
    position: relative;
}
.slick::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 3px);
}

slickスライダーでは、「slick-initialized」がスライダーが初期化（読み込み完了）した時点で付与されるので、まず全非表示にしておき「slick-initialized」が付与された時点で表示するようにする。

#hogehoge-slider{
    display: none;
}
#hogehoge-slider.slick-initialized{
    display: block; /*slick-initializedが付与されたら表示*/
}

cssアニメーションで行う

#hogehoge-slider{
    opacity: 0;
    transition: opacity .3s linear;
}
#hogehoge-slider.slick-initialized{
    opacity: 1; /*slick-initializedが付与されたら表示*/
}