IT小ネタその3
まずは、Sticky Headerから。これは、スクロールダウンして行った時に、上部にタイトルなどを残すためのプラグインとそのカスタマイズ。フォントとマウスオーバーした時の色を追加指定する。wp-content/plugins/sticky-hedaer/css/public.css
#thsp-sticky-header-title { font-family:"Cabin Sketch", cursive; text-transform: uppercase; float: left; font-size: 22px; line-height: 30px; margin: 0 !important; } #thsp-sticky-header-title a:hover { color: #1fa0ae !important; } #thsp-sticky-header li a:hover { color: #1fa0ae !important; }
上部にSticky Headerを残す設定にしたら、写真を表示した時のクローズボタンが隠れてしまい、押しにくい。設定ではTopとBottomが選べるが、どちらを選んでも上部にしか表示されないので、対応する。wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css
#fancybox-close { position: absolute; // top: -15px; bottom: -15px; right: -15px; width: 30px; height: 30px; background: transparent url('fancybox.png') -40px 0px; cursor: pointer; z-index:11103; display: none; }
Sticky Headerの右端に検索ページへのリンクを設置する。wp-content/themes/fashionistas-child/にオリジナルのpage.phpをコピーし、searchpage.phpにリネームする。「Template Name: Search Page」と記述することで、ページ作成時に「テンプレート」として選択可能となる。このテンプレートを利用して、「検索」という固定ページを作成し、固定メニューの最後に追加する。
<?php /* Template Name: Search Page */ get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php get_search_form(); ?> <!-- #content --></div> <!-- #primary --></div>
タイトルに直接以下のhtmlを記述し、GenriconsからSearchボタンを指定する。
<div class="genericon genericon-search" title="検索" style="font-size: 18px; vertical-align: middle;"></div>
Sticky Headerの表示とHome Categoriesの相性が悪いので、以下の設定を元に戻す。
wp-content/plugins/home-categories/home-categories.php
public function filter( $query ) { if ( is_home() && $query->is_main_query() ) { // if ( is_home() && $query->is_main_query() || !is_user_logged_in() ) {
これでスクロールした時、薄いヘッダーが上部に残る設定が出来ました。やりたいことの答えはたくさんあるので、これはそのうちの一つの答えなだけで、ここからインスピレーションを得て、自分なりの新しい方法をチャレンジするのが正しいカスタマイズの楽しみ方ですw