IT小ネタその3

閲覧数: 45(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閑話, 公開タグ,
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

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

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

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