カテゴリー: コーディング

「SiteGurad WP Plugin」は、不正ログインに対する攻撃に対してのWordPressのセキュリティ向上ができるプラグインです。
WordPressにインストールするだけで、ログインページのセキュリティを向上させることができます。

SiteGurad WP Plugin

プラグインの設定では画像認証でセキュリティ向上させる画像認証を加える事が出来ます。

ログイン時にユーザー名、パスワードと画像で示された文字を入力しないとログインできないようになります、

画像認証で表示される文字は毎回変更されるので、コンピュータによる不正ログインの確立を下げてくれます。

また、SiteGurad WP Pluginにはログインロック機能があり、有効化すると、ログインの失敗が指定時間に一定回数に達したIPアドレスを指定時間ブロックしてくるなど、
ログインセキュリティの観点で不正ログインを防いでくれます。

セレクト要素に擬似要素で三角形などの装飾をすると、その三角形の部分だけクリックできない問題が起こります。
その場合、疑似要素対しに「pointer-events: none;」を指定することで解決ができます。
マウスイベントのターゲットから除外することで、セレクト要素の選択が可能になります。

select label {
    position: relative;
}

select label:after {
    display: block;
    content: " ";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    margin-top: -8px;
    background: url(○◯◯.png)  no-repeat;
    background-size: 20px;
    pointer-events: none;/*　←★これ*/
}

ボタンを押すとYouTube動画をモーダルで表示させるプラグインの紹介です。

Boxerダウンロードページ

ダウンロードファイルで使用するファイルは
jquery.fs.boxer.min.js、jquery.fs.boxer.cssの二つです。

使い方は簡単でリンク先をYouTubeのの動画に設定しクラス名を設定するだけです。

再生

$(function(){
  $('.boxer').boxer();
});

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

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