IT小ネタその3

閲覧数: 50(0)

まずは、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

カテゴリーIT閑話, 公開タグ,
最近のいろいろ

先日の記事で「写真を整理」していたら、、、という話をしましたが。不要な写真もありストレージ容量を確保  続きを読む

最終更新日
blank

投稿日は表示されるけど、その後の修正は当然のことならが投稿日には反映されない。一般的な投稿ならそれほ  続きを読む

挙動不審なSwiper対策
blank

ここのトップページで「おすすめ記事」をスライダー形式で表示してくれているのが「Swiper」です。こ  続きを読む

6月の検索ワードまとめ
blank

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

トリミング2
blank

Wordpressの場合、Mediawikiより手厚い日本語環境(マルチバイト対応)が用意されている  続きを読む

ElasticPress 3.5
blank

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

スポンサーリンク

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください