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閑話, 公開タグ,
ElasticPress 3.5.6

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

ページナビのテキスト
blank

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

緊急事態宣言で外出自粛になり...
blank

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

タイトルを抜粋する
blank

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

検索精度を高める
blank

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

スポンサーリンク

コメントを残す

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