MENU

フォロー

LOST ARK（ロストアーク）の攻略を多数掲載中！

Simplicityに検索ボックスのモーダルウィンドウ表示を追加してSTORK風テーマにカスタマイズ！

2017.11.9｜6年前633

こんにちは、SHUMiSTです。

Simplicity（シンプリシティー）テーマを使用して、STORK（ストーク）テーマを再現というかデザインを近づけるカスタマイズ第５回目です。

前回はヘッダー（背景）部分のデザインをカスタマイズし、それによりヘッダー全体のカスタマイズが全て完了しました。
ヘッダー部分だけみればSTORK（ストーク）テーマに見えるぐらいにはなっていると思います。

今回は少しハードルが上がりますが、予告通りメニューに検索を追加し、検索ボックスをモーダルウィンドウで表示するカスタマイズを行います。

追加ソースはなるべく、子テーマのスタイルシート（style.css）に追加しましょう。
また、テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。

スポンサーリンク

第５回：モーダルウィンドウの検索ボックスを追加しよう！

今回は、テンプレートファイルとスタイルシートの両方に変更を加えることでモーダルウィンドウの検索ボックスを追加します。

navi.phpのナビゲーションメニューに検索メニューを追加

Simplicity（シンプリシティー）テーマには検索をナビゲーションメニューに追加する機能がないので、STORK（ストーク）テーマ風になるようにオリジナルでテンプレートファイルにソースを追加します。

変更前ソース

5行～7行付近
    <div id="navi-in">
      <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
    </div><!-- /#navi-in -->

追加ソース

下記のソースが検索メニューのソースになります。

#search-box・・・検索メニューのボックス（今回のカスタマイズで追加）
.s-en・・・ナビゲーションサブラベル用のクラス（第３回で追加）

下記のID（ボックス）とアンカーリンクは後ほど説明するモーダルウィンドウの検索ボックスを表示するために使用します。
#search-box
#searchbox（アンカーリンク）
      <?php if ( !is_mobile() )://モバイル以外のメニューに検索ボックスを追加 ?>
          <a id="search-box" href="#searchbox"><span class="s-en">search</span></a>
      <?php endif ?>

変更後ソース

ナビゲーションメニュー（.navi-in）ボックス直下のナビゲーションメニュー前に追加します。

    <div id="navi-in">
      <?php if ( !is_mobile() )://モバイル以外のメニューに検索ボックスを追加 ?>
          <a id="search-box" href="#searchbox"><span class="s-en">search</span></a>
      <?php endif ?>
      <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
    </div><!-- /#navi-in -->

追加した検索メニューにスタイルを適用

追加しただけではレイアウトが崩れているので、スタイルを適用してデザインをSTORK（ストーク）テーマ風に整えます。

第３回で追加してある以下のメディアクエリ（768px以上）の設定にスタイルを追加します。

.menu-メニュー名-containerのメニュー名は外観->メニューのヘッダーナビに設定されているメニュー名です。

追加先のメディアクエリ

@media only screen and (min-width: 768px) {
//この括弧内に追加する
}

追加ソース

    .menu-メニュー名-container {
        float: right;
    }
    #search-box {
        display: block;
        text-decoration: none;
        text-align: center;
        line-height: 1.1;
        float: right;
        padding: 7px 10px;
        background: rgba(0, 0, 0, .04);
        color: #edf9fc;
    }
    #search-box:hover {
        color: #e5e5e5;
    }
    #search-box:before {
        font-size: 1.5em;
        font-family: "fontawesome";
        content: '\f002';
        width: 100%;
        display: block;
    }
    #search-box span {
        font-size: .7em;
    }

footer-javascript.phpのanimatedModal.jsの読み込み条件を変更

javascriptを使用してモーダルウィンドウの検索ボックスを追加します。

STORK（ストーク）テーマでは、jQueryプラグインのremodal.jsを使用して実装してありますが、javascriptをあまり読み込むと表示速度に影響を与えてしまいます。

そこで、Simplicity（シンプリシティー）テーマでは似たようなjQueryプラグインのanimatedModal.jsが既に組み込まれているので流用して実装します。

元々、Simplicity（シンプリシティー）テーマではモバイル用メニューのみにanimatedModal.jsが使用されており、読み込み条件がモバイルのみになっているので変更を加えていきます。

変更箇所が２箇所あるので注意してください。

該当ソース①

下記の該当ソースはモバイル用メニューをモーダルウィンドウで表示するソースですが、animatedModal.js関連ファイルやソースの読み込みもモバイルのみの条件に含まれているため変更します。

26行～39行付近
///////////////////////////////////
//animatedModal.js関連ファイルの呼び出し
///////////////////////////////////
if ( is_mobile_menu_type_modal() && (is_mobile() || is_responsive_enable()) ): ?>
<!--#mobile-menu-toggleボタンで呼び出される-->
<div id="animatedModal">
    <div class="close-animatedModal">
        <a href="#" class="close-button"><span class="fa fa-times-circle"></span></a>
    </div>

    <div class="modal-content">
        <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
    </div>
</div>

追加ソース①

40行付近
<?php endif; ?>

変更後のソース①

if文を1回閉じる変更を行います。

///////////////////////////////////
//animatedModal.js関連ファイルの呼び出し
///////////////////////////////////
if ( is_mobile_menu_type_modal() && (is_mobile() || is_responsive_enable()) ): ?>
<!--#mobile-menu-toggleボタンで呼び出される-->
<div id="animatedModal">
    <div class="close-animatedModal">
        <a href="#" class="close-button"><span class="fa fa-times-circle"></span></a>
    </div>

    <div class="modal-content">
        <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
    </div>
</div>
<?php endif; ?>

該当ソース②

animatedModal.min.jsの読み込みとモバイル用メニューのモーダルウィンドウ表示設定のソースです。

48行～56行付近
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/animatedModal.min.js"></script>
<script>
  jQuery("#mobile-menu-modal").animatedModal({
    color: '#333',
    animatedIn:  'fadeIn',
    animatedOut: 'fadeOut',
    animationDuration: '.1s',
  });
</script>
<?php endif; ?>

追加ソース②

48行～49行付近
<?php
if ( is_mobile_menu_type_modal() && (is_mobile() || is_responsive_enable()) ): ?>

変更後のソース②

モバイル用メニューに関する設定なのでモバイルのみ読み込むように条件を設定します。
また、animatedModal.min.jsは全体で読み込みたいので条件文から外れるように外に出してます。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/animatedModal.min.js"></script>
<?php
if ( is_mobile_menu_type_modal() && (is_mobile() || is_responsive_enable()) ): ?>
<script>
  jQuery("#mobile-menu-modal").animatedModal({
    color: '#333',
    animatedIn:  'fadeIn',
    animatedOut: 'fadeOut',
    animationDuration: '.6s',
  });
</script>
<?php endif; ?>

footer-javascript.phpに検索ボックス用のモーダルウィンドウを追加

先ほどの変更で追加する下準備は完了したので、いよいよ検索ボックス用のモーダルウィンドウを追加します。

該当ソース

47行～58行付近
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/animatedModal.min.js"></script>
<?php
if ( is_mobile_menu_type_modal() && (is_mobile() || is_responsive_enable()) ): ?>
<script>
  jQuery("#mobile-menu-modal").animatedModal({
    color: '#333',
    animatedIn:  'fadeIn',
    animatedOut: 'fadeOut',
    animationDuration: '.6s',
  });
</script>
<?php endif; ?>

追加ソース

上記、該当ソースの<?php endif; ?>直下に追加します。

#searchbox
先ほど追加した検索メニューのアンカーリンク押下時に表示されるボックス
modalTargetに指定するボックス
#close-searchbox
モーダルウィンドウの閉じるボックス
#search-box
先ほど追加した検索メニューのボックスID（呼び出しボタン）
.search-box-on
検索ボックス用モーダルウィンドウが表示されている場合に<body>タグに付与されるクラス
59行～82行付近
<!--#search-boxボタンで呼び出される-->
<div id="searchbox">
    <div class="modal-content">
        <dl>
            <dt>キーワードで記事を検索</dt>
            <dt><?php get_template_part('searchform'); ?></dt>
        </dl>
    </div>
    <div class="close-searchbox">
        <a href="#" class="close-button"><span class="fa fa-times"><span class="close-font">CLOSE</span></span></a>
    </div>
</div>
<script>
    jQuery("#search-box, #searchbox .close-button").on("click", function(){
        jQuery("body").toggleClass("search-box-on");
    });
    jQuery("#search-box").animatedModal({
        modalTarget:'searchbox',
        color: '#333',
        animatedIn:  'fadeIn',
        animatedOut: 'fadeOut',
        animationDuration: '.6s',
    });
</script>

変更後のソース

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/animatedModal.min.js"></script>
<?php
if ( is_mobile_menu_type_modal() && (is_mobile() || is_responsive_enable()) ): ?>
<script>
  jQuery("#mobile-menu-modal").animatedModal({
    color: '#333',
    animatedIn:  'fadeIn',
    animatedOut: 'fadeOut',
    animationDuration: '.6s',
  });
</script>
<?php endif; ?>
<!--#search-boxボタンで呼び出される-->
<div id="searchbox">
    <div class="modal-content">
        <dl>
            <dt>キーワードで記事を検索</dt>
            <dt><?php get_template_part('searchform'); ?></dt>
        </dl>
    </div>
    <div class="close-searchbox">
        <a href="#" class="close-button"><span class="fa fa-times"><span class="close-font">CLOSE</span></span></a>
    </div>
</div>
<script>
    jQuery("#search-box, #searchbox .close-button").on("click", function(){
        jQuery("body").toggleClass("search-box-on");
    });
    jQuery("#search-box").animatedModal({
        modalTarget:'searchbox',
        color: '#333',
        animatedIn:  'fadeIn',
        animatedOut: 'fadeOut',
        animationDuration: '.6s',
    });
</script>
animatedIn
モーダルウィンドウを開く時のアニメーション
animatedOut
モーダルウィンドウを閉じる時のアニメーション
animationDuration
アニメーションの時間

指定できるアニメーションの種類は下記のanimatedModal.js公式サイトにプレビュー付で詳しく掲載されているのでそちらを参照してください。

animatedModal.js

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transiti

joaopereirawd.github.iojoaopereirawd.github.io

子テーマのfunction.phpにanimate.min.cssの呼び出しを設定

親テーマディレクトリの”lib/scripts.php”で呼び出されていますが、モバイルのみに条件がなっており、親テーマ直下以外のテンプレートに関しては子テーマによる変更が不可能なため、子テーマの”function.php”の第３回で追加したadd_files()関数内に重複しないようにモバイル以外のみ呼び出すように設定します。

親テーマを直接変更しアップロードすることも可能ですが、親テーマに変更を加えるとSimplicity（シンプリシティー）テーマのアップデートがあった場合などにメンテナンス性が悪くなるためオススメしません。

変更前のソース

//必要なファイルをヘッダーに読み込む
function add_files() {
  //Googleフォントを読み込む
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Concert+One', array('simplicity-style') );
  //ここに追加ソースを挿入します。
}
add_action( 'wp_enqueue_scripts', 'add_files' );

追加ソース

下記の追加ソースをadd_files()関数内の上記挿入箇所に追加します。

  //モーダル検索ボックス用のanimatedModal.js関連ファイルの呼び出し（重複呼び出し対策）
  //lib/scripts.phpでモバイルのみ呼び出されているが変更を加えたくないため記述
  if ( !is_mobile() ) {
    wp_enqueue_style( 'animatedmodal-animate-style',  get_template_directory_uri() . '/css/animate.min.css', array('simplicity-style') );
  }

変更後のソース

//必要なファイルをヘッダーに読み込む
function add_files() {
  //Googleフォントを読み込む
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Concert+One', array('simplicity-style') );
  //モーダル検索ボックス用のanimatedModal.js関連ファイルの呼び出し（重複呼び出し対策）
  //lib/scripts.phpでモバイルのみ呼び出されているが変更を加えたくないため記述
  if ( !is_mobile() ) {
    wp_enqueue_style( 'animatedmodal-animate-style',  get_template_directory_uri() . &#039;/css/animate.min.css&#039;, array(&#039;simplicity-style&#039;) );
  }
}
add_action( 'wp_enqueue_scripts', 'add_files' );

検索ボックス用モーダルウィンドウのスタイルを設定

今までのカスタマイズで検索ボックス用モーダルウィンドウの追加まで完了しましたが、スタイルがまだ適用されておらずSTORK（ストーク）テーマのデザインとは程遠い状態なので下記の追加ソースを子テーマのスタイルシートに適用することでSTORK（ストーク）テーマのデザインに近づけます。

追加ソース

#searchbox {
    background-color: rgba(43, 46, 56, 0.9) !important;
}
#searchbox .modal-content {
    max-width: 700px;
    padding: 0 1em;
}
#searchbox .modal-content, #searchbox .close-searchbox {
    position: relative;
    top: 45%;
    -webkit-transform: translateY(-50%); /* Safari用 */
    transform: translateY(-50%);
}
#searchbox dl {
    margin: 0;
}
#searchbox dt {
    color: #fff;
    font-weight: normal;
}
#searchbox #searchform {
    margin: 0;
}
#searchbox #s {
    margin-bottom: 0;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
    padding: 3% 2%;
    color: #666;
    border: 3px solid rgba(51, 51, 51, 0.1);
    border-radius: 1px;
    box-sizing: content-box;
    max-width: 96%;
    -webkit-transition: background-color 0.24s ease-in-out;
    transition: background-color 0.24s ease-in-out;
    height: initial;
}
#searchbox #searchsubmit {
    color: #333;
    position: absolute;
    right: 3px;
    top: 0;
    border: 0;
    display: block;
    padding: 0 4%;
    font-size: 1.2em;
    height: 100%;
    margin: 0;
}
#searchbox .close-searchbox {
    text-align: center;
    font-size: 1.2em;
}
#searchbox .close-button {
    color: #fff;
}
#searchbox .fa-times:before {
    font-size: 1.5em;
    position: relative;
    top: 3px;
}
.close-font {
    font-family: 'Concert One', cursive;
    font-weight: normal;
    margin-left: .5em;
}

モーダルウィンドウ開閉時の表示のズレを修正

Simplicity（シンプリシティー）テーマでは、モバイルメニュー用にしか使用していなかったため問題がなかったようですが、スクロールバーが表示されるパソコンなどの端末では、開閉時にスクロールバー幅分表示にズレが生じてしまいます。

これは、Simplicity（シンプリシティー）テーマのせいではなく、animatedModal.jsの仕様上の問題なのでこれを今回修正します。

表示ズレ修正前の下準備

修正前に、必要な修正ファイルを準備します。

修正ファイル

animatedModal.js
animatedModal（jQueryプラグイン）本体
animatedModal.min.js
animatedModal（jQueryプラグイン）Minified（軽量）バージョン

修正前の下準備

①子テーマディレクトリ直下に”js”ディレクトリを作成
②”親テーマディレクトリ/js”ディレクトリ内に上記２種類の修正ファイルがあるので先ほど作成した子テーマディレクトリ直下のjsディレクトリ内にコピーします。
③以下の手順に添って修正作業を進めます。

子テーマのanimatedModal.jsを修正

子テーマのanimatedModal.jsをテキストエディタで開き、下記のソースのように修正します。

子テーマの”js”ディレクトリ内にあるため、外観->テーマ編集では編集できません。
変更箇所が２箇所あるので注意してください。

修正前のソース①

69行～72行付近
        modal.click(function(event) {       
            event.preventDefault();
            $('body, html').css({'overflow':'hidden'});
            if (href == idConc) {

追加ソース①

スクロールバーの幅が大体17pxぐらいなのでモーダルウィンドウを開く際に、余白を17pxとることで対応します。

72行付近
            $('body.search-box-on, #searchbox').css({'padding-right':'17px'});

修正後のソース①

        modal.click(function(event) {       
            event.preventDefault();
            $('body, html').css({'overflow':'hidden'});
            $('body.search-box-on, #searchbox').css({'padding-right':'17px'});
            if (href == idConc) {

修正前のソース②

93行～97行付近
        closeBt.click(function(event) {
            event.preventDefault();
            $('body, html').css({'overflow':'auto'});

            settings.beforeClose(); //beforeClose

追加ソース②

追加ソース①で追加したスクロールバーの幅17pxをモーダルウィンドウを閉じる際に、元に戻します。

96行付近
            $('body, #searchbox').css({'padding-right':'0px'});

修正後のソース②

        closeBt.click(function(event) {
            event.preventDefault();
            $('body, html').css({'overflow':'auto'});
            $('body, #searchbox').css({'padding-right':'0px'});
            settings.beforeClose(); //beforeClose

上記の修正が完了したら、テキストエディタでanimatedModal.jsを一度保存します。

子テーマのanimatedModal.min.jsを修正

子テーマのanimatedModal.min.jsをテキストエディタで開き、下記のソースを全てコピペ（コピー＆ペースト）し上書き保存します。

下記のソースは先ほど修正したanimatedModal.jsをMinified（軽量化）ソースになります。

今回は、すでにこちらでMinified（軽量化）ソースをコピペ（コピー＆ペースト）し、上書きするだけで良いですが自力でMinified（軽量化）したい方は下記のサイトに軽量化前のソースをコピペ（コピー＆ペースト）することでMinified（軽量化）ソースを出力することができます。

Refresh-SF - Online JavaScript and CSS Compressor

refresh-sf.comrefresh-sf.com

子テーマの”js”ディレクトリ内にあるため、外観->テーマ編集では編集できません。

修正ソース

!function(a){a.fn.animatedModal=function(o){function n(){l.css({"z-index":i.zIndexOut}),i.afterClose()}function t(){i.afterOpen()}var e=a(this),i=a.extend({modalTarget:"animatedModal",position:"fixed",width:"100%",height:"100%",top:"0px",left:"0px",zIndexIn:"9999",zIndexOut:"-9999",color:"#39BEB9",opacityIn:"1",opacityOut:"0",animatedIn:"zoomIn",animatedOut:"zoomOut",animationDuration:".6s",overflow:"auto",beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){}},o),d=a(".close-"+i.modalTarget),s=a(e).attr("href"),l=a("body").find("#"+i.modalTarget),r="#"+l.attr("id");l.addClass("animated"),l.addClass(i.modalTarget+"-off");var m={position:i.position,width:i.width,height:i.height,top:i.top,left:i.left,"background-color":i.color,"overflow-y":i.overflow,"z-index":i.zIndexOut,opacity:i.opacityOut,"-webkit-animation-duration":i.animationDuration};l.css(m),e.click(function(o){o.preventDefault(),a("body, html").css({overflow:"hidden"}),a("body.search-box-on, #searchbox").css({"padding-right":"17px"}),s==r&&(l.hasClass(i.modalTarget+"-off")&&(l.removeClass(i.animatedOut),l.removeClass(i.modalTarget+"-off"),l.addClass(i.modalTarget+"-on")),l.hasClass(i.modalTarget+"-on")&&(i.beforeOpen(),l.css({opacity:i.opacityIn,"z-index":i.zIndexIn}),l.addClass(i.animatedIn),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",t)))}),d.click(function(o){o.preventDefault(),a("body, html").css({overflow:"auto"}),a("body, #searchbox").css({"padding-right":"0px"}),i.beforeClose(),l.hasClass(i.modalTarget+"-on")&&(l.removeClass(i.modalTarget+"-on"),l.addClass(i.modalTarget+"-off")),l.hasClass(i.modalTarget+"-off")&&(l.removeClass(i.animatedIn),l.addClass(i.animatedOut),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",n))})}}(jQuery);

animatedModal.jsとanimatedModal.min.jsをアップロード

animatedModal.jsとanimatedModal.min.jsを作成した”js”ディレクトリごと子テーマディレクトリ内にアップロードし、修正作業は完了です。

スポンサーリンク

カスタマイズまとめ

今回はかなり長くなってしまいましたが、今回のカスタマイズによりメニューに検索が追加され、検索ボックスをモーダルウィンドウで表示できるようになりました。
ちょっとしたことではありますが、こういった細かい所で動きのあるアニメーションがあるだけでサイト全体の雰囲気も変わってくるのではないでしょうか。

何はともあれ、これにてヘッダー全体はSTORK（ストーク）テーマと遜色ないぐらいにはなったのではないかと思います。

念のため、IE11/Edge/Chrome/FireFoxの主要ブラウザ最新版では表示・動作確認をしてみましたが問題ないのでヘッダー全体はこれにて完成とさせていただきます。

次回は、以下の３つのカスタマイズのどれかを行っていきます。
（順番は未定→メインカラム上部にピックアップ記事スライダーの追加を行いました。）

①モバイルメニューのデザインを整える
②メインカラム上部にピックアップ記事スライダーの追加（第６回で完了）
③メインカラムのデザインを整える

Simplicity（シンプリシティー）テーマの元々の機能やソースを流用して、STORK（ストーク）テーマに近づけているため、STORK（ストーク）テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。

STORK（ストーク）テーマの機能面などを利用したい方はSTORK（ストーク）テーマを購入してご利用ください。

今回のカスタマイズ前後のスクリーンショット

メニューの項目がカスタマイズ前とカスタマイズ後で変わってますが、サイト運営上、きちんとした項目に変更しただけで今回のカスタマイズには関係ないので気にしないでください。

カスタマイズ前

カスタマイズ後

検索ボックス用モーダルウィンドウ

第４回：ヘッダー（背景）デザイン編を読む

第６回：ページトップにピックアップ記事スライダーを追加編を読む

SimplicityをSTORK風にカスタマイズシリーズ目次へ

スポンサーリンク

この記事が気に入ったら
いいね！しよう！

最新記事をお届けします。

書いている人

SHUMiST

趣味人

書いている人”SHUMiST（シュミスト/趣味人）”は自他共に認める「割と極度に面倒くさがり」です。 よく人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はＯ型なんですけど「本当にＯ型？」とか言われることが多い。なぜ、WEB関係に手を出したのかが自分でも疑問。

Follow Me

カテゴリー

アーカイブ