development_creative

この記事は1年以上経過しています。

【WordPress】プラグインなし!記事にマーカーが引けるようにしたい

やりたいことは、スクロールしたらミョイ〜ンとマーカー。

スクロールしたら、記事の強調したい部分に
マーカーがミョイ〜ンってしたい。

でも、自前で実装されてる例が少なく、
ちょっぴり調べたので、共有。

こちらが完成した時の動き!

やっぱり動きがあると、マーカーって気持ちいい・・・

主にやることは以下の3点!

実装までの概要をまとめます!

  • function.phpに管理画面から「マーカー」を選択可能にする
  • スクロールしたら発火用のclass(筆者は:.scrollin)を付加するjsを記述する
  • 発火した後の動きと、マーカーの色などを指定するcss(SCSS)を記述する

細かいところは、各々の環境で調整してくださいね。

1. 管理画面から「マーカー」を選択可能にする

こちらのコードをfunction.phpにコピペします。

function tiny_style_formats( $settings ) {
    $style_formats = array(
        array(
            'title' => 'マーカー',
            'inline' => 'span',
            'classes' => 'marker',
            'wrapper' => 'true',
        ),
    );
    $settings[ 'style_formats '] = json_encode( $style_formats );
    return $settings;
    }
add_filter( 'tiny_mce_before_init', 'tiny_style_formats' );

//スタイル項目追加と位置
function original_styles_button( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter('mce_buttons', 'original_styles_button' );

コピペ後、管理画面のエディターでクラシックを選択すると、
“マーカー”というスタイルが追加されます。

マーカーを引いて欲しい部分をドラッグして、スタイルで”マーカー”を選択。
そうすると、スクロールした時にミョい〜んって伸びます。

2. スクロールしたらクラスを付加するjs

こちらを適正なところに記述。

$(window).scroll(function () {
    $(".marker").each(function () {
        var elemPos = $(this).offset().top,
            scroll = $(window).scrollTop(),
            windowHeight = $(window).height();

        if (scroll > elemPos - windowHeight + 100) {
            $(this).addClass("scrollin");
        }
    });
});

3. css(SCSS)はこちら

/* ### マーカーアニメーション
--------------------------------------------*/
.marker {
  background: -webkit-linear-gradient(left, $cospot-lime-yellow 50%, transparent 50%);
  background: -moz-linear-gradient(left, $cospot-lime-yellow 50%, transparent 50%);
  background: linear-gradient(left, $cospot-lime-yellow 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
  background-position: 100% .5em;
  transition: 2s;
  font-size: 16px;

  &.scrollin {
    background-position: 0% .5em;
  }
}

みんなプラグインで実装・・・いいのかい?それで。

よくあるオシャレ系のいけてるブログさんの記事って、
スクロールすると、強調すべき部分にマーカーが出てくるので、
俺っちもそれがやりたい!ってなってググった結果、
結構みなさん、何の躊躇いもなくプラグインをブチこまれていて・・・

基本的に余計な機能とかもぶち込まれるのがほとんどなので、
開発側としては、できるだけプラグインは避けたいんですよね・・・

ほら、Wordpressの管理画面って、メニュー増やすと地獄じゃなァい?

なんで、できるだけ余計なプラグインをおいそれとぶち込んで、
メニューボタンまみれなんてことは避けたいんすよね。

ほんとやめよ?適当にプラグイン入れるの・・・
アプデ後によくわからんことになる原因にもなるし・・・。

勉強にもなるし、アカンとなった場合でも原因の特定・解決も早いので、
自前で実装できるようになろ。

Related ariticle

関連記事

TOP