スクロール時にしたからコンテンツがふわっとフェードインさせる方法です、

■css

.fade{
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.6s;
}

■js

$(function(){
    $(window).scroll(function (){
        $('.fade').each(function(){
            var target = $(this).offset().top;
            var scrollTop = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > target - windowHeight + 300){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});

表示させるタイミングは、ターゲットの存在するスクロール位置から300のところ(if (scroll > target – windowHeight + 300)です。

WordPressでページに個別CSSを追加する方法です。

メインテーマのCSSを捜査してほしくない場合や、固定ページごとに個別にCSSを当てたいといった場合に便利です。

add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
    global $post;
    echo '';
    echo ''.get_post_meta($post->ID,'_custom_css',true).'';
}
function save_custom_css($post_id) {
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '';
        endwhile; endif;
        rewind_posts();
    }

カスタムフィールドの値の文字数制限をかける方法です。

カスタムフィールド上でタイトルや抜粋など、文字数制限をかけることで、
更新した際のレイアウトの崩れを防ぐといったことが可能です。

mb_substrで文字数制限の前に文字数をカウントし、30文字以内で表示させるようになっています。

ノート風の罫線を作成する方法です。

cssで文字罫線を付ける場合text-decorationでunderlineを設定するかと思いますが、
文字のある領域のみしか下線が引かれません、

ノート風に文字に下線を引きたい場合には専用の画像を作成しbackgroundでrepeatで設定してあげると実現可能です。

使用する画像は文字サイズを含めた高さに下線が設定されている画像です。
↓↓

.underline {
    background: url(underline.png) repeat bottom ;
    font-size: 14px;
    line-height: 30px;
}

display:block/none;での画像切り替えではなく、画像のソースをjsで切り替えて表示する方法です。
スマホレイアウトになったときに、いちいち画像にクラス名を付与するのが面倒な場合便利です。

$(function () {
 //変数セット
 var $elem = $('.change');
 var sp = '_sp.';
 var pc = '_pc.';
 var replaceWidth = 768; 
 
 function imageSwitch() {
 
 var windowWidth = parseInt($(window).width());
 
 $elem.each(function () {
 var $this = $(this);
 if (windowWidth >= replaceWidth) {
 $this.attr('src', $this.attr('src').replace(sp, pc));
 } else {
 $this.attr('src', $this.attr('src').replace(pc, sp));
 }
 });
 }
 imageSwitch();
 
 var delayStart;
 var delayTime = 200; //ミリSec
 $(window).on('resize', function () {
 clearTimeout(delayStart);
 delayStart = setTimeout(function () {
 imageSwitch();
 }, delayTime);
 });
});

切り替える画像は画像の名前の最後に、_pc、_spとつけるだけでOKです。

WordPressにはリビジョンという機能があり、ページの更新履歴は残せますが、
どのユーザーがどの記事を編集したか、どのファイルを削除したかなどは履歴に残りません。

WP Security Audit Log

管理できるログは

■投稿、カスタム投稿、固定ページでは、カテゴリの作成・編集・削除
■マルチサイトの追加・削除
■ログイン履歴
■ファイルのアップロード・削除
■ユーザー、ユーザープロフィールの追加・変更・削除
■プラグインの新規追加・削除・アップグレード・有効化・停止など
■ウィジェットの追加・変更・削除など
■テーマの適用・削除
■wordpressのアップデートなど

です。

だれがいつ何を編集したかわかるので、万が一何かあったとき、どこを触ったかわかるので解決にもつながります。

月別アーカイブなど月の日数を取得したい時などに役に立ちます。

取得するにはdateオブジェクトを使用して計算します。

const getLastDay = (year, month) => {
    return new Date(year, month, 0).getDate();
};

// 28
const lastDay = getLastDay(2017, 2);

カスタムフィールドの値でclassを設定する方法です。

カスタムフィールドの選択された要素にによってクラス名を付与します。　

主な使い方はセレクトボックスなどで選択させてレイアウトを変更させるといった使い方になります。

functions.phpでユーザー関数を定義します。

function cate_class() {
    $custom_cate = post_custom( 'カスタムフィールド' );
    if ( $custom_cate == '選択肢１' ) {
        echo 'cateA';
    } else if ( $custom_cate == '選択肢２' ) {
        echo 'cateB';
    } else {
        echo 'no-category';
    }
}

月別アーカイブをスクロールで月ごとに読み込みさせる方法です。

例えば今月の記事一覧をページを読み込んだ時表示しておき、最後までスクロールすると、
先月の記事一覧を読み込むといった感じです。

■index.phpなど

       'post',
        'date_query' => array(
           array(
             'year'  => $year,
             'month' => $month,
             'day'   => $day,
           ),
        ),

      );
      $the_query = new WP_Query($args);
      if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) : $the_query->the_post();
      ?>
      

        

          

          
          

            
          
          

            
            

          
        
      
      
      
    

■js

var href = today = new Date(),
         current_year = today.getFullYear(),
         current_month = today.getMonth() + 1;

$(function() {
    $(window).scroll(function(ev) {

        var $window = $(ev.currentTarget),
            height = $window.height(),
            scrollTop = $window.scrollTop(),
            documentHeight = $(document).height();
        if (documentHeight === height + scrollTop) {
          current_month--;

          if(current_month == 0){
            current_year--;
            current_month = 12;
          }
          console.log(current_year);
          console.log(current_month);


          jQuery.ajax({
              type: 'post',
              
              data: {
                'today':today,
                'year':current_year,
                'current_month':current_month
              },
              success: function(data) {
                  data = JSON.parse(data);
                  jQuery(".section.container").append(data['html']);
              }
          });

          return false;
        }
    });
});

■more.php

 'ASC',
        'post_type' => 'post',
        'orderby' => 'date',
        'posts_per_page' => -1,
        'date_query' => array(
            array(
                'after' => array(
                    'year' => $this_year,
                    'month' => $current_month,
                    'day' => $first_day,
                ),
                'before' => array(
                    'year' => $this_year,
                    'month' => $current_month,
                    'day' => $last_day,
                ),
                'inclusive' => true,
            ),
        ),
    ));

$results = $mydata_past;
    $html = "";


    foreach ($results as $result) {
      $html .= '
';
        $html .= '
';
          $html .= '
';
            $html .= '
';
              $html .= '
';
                $html .= '';
                  $html .= get_the_post_thumbnail($result->ID,'full');
                $html .='';
              $html .= '
';
              $html .= '
';

                $html .= '
'.get_post_time('m/d','false',$result->ID).'
';
                $html .= '
';
                $html .=  get_the_title($result->ID);
                $html .='
';
              $html .= '
';
            $html .= '
';
          $html .= '