[ 質問者返信待ち ] 「ページヘッダー設定」をトップページにも反映させたい

VWSとは フォーラム Lightning [ 質問者返信待ち ] 「ページヘッダー設定」をトップページにも反映させたい

[ 質問者返信待ち ] 「ページヘッダー設定」をトップページにも反映させたい

  • このトピックには13件の返信、4人の参加者があり、最後にtottiにより1ヶ月、 1週前に更新されました。
14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • 投稿者
    投稿
  • #47130

    totti
    参加者

    ■ 利用テーマとバージョン :
    LightningPro Version:8.2.0

    ■ 質問内容:
    お世話になります。
    どなたかご教示いただければありがたく存じます。

    「外観 > カスタマイズ > Lightninngページヘッダー設定」で、ヘッダー画像を設定しました。
    しかし、このヘッダー画像をホームページ(トップページ)に表示できません。
    ホームページは「外観 > カスタマイズ > ホームページ設定」で、固定ページZをホームページに設定しています。
    Zの編集画面において「ページヘッダーを表示しない」にチェックを入れていませんが、ヘッダー画像は表示されません。
    その他の固定ページや投稿ページと同様に、ホームページでも、「ページヘッダー設定」に設定した画像を表示するにはどうすればいいでしょうか?

    #47137

    対馬 俊彦
    参加者

    Lightning では、[ページヘッダーを表示しない] の設定に関係なく
    ホームページにページヘッダーが出力されません。

    スライドショーを表示しないで、先頭に Outer ブロックを置いて、
    固定ページのページヘッダーのようなものを作るのがよいと思います。

    スライドショーの上にページヘッダー(のようなもの)を表示するのはけっこう難しいです。

    #47138

    DRILL LANCER
    モデレーター

    子テーマの functions.php やプラグイン等に下記を参考にこのコードこのフックを使って挿入するコードを書けばできないこともないですが動作保証外です。

    できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦!

    最低でも 設定>表示設定 からトップページを固定ページに指定していないと期待した結果が得られないと思います。

    #47141

    対馬 俊彦
    参加者

    このコードをこのフックを使って挿入するコードを書けばできないこともないですが

    このやり方を試してみました。

    ページヘッダーの HTML は出力されますが、CSS までは出力してくれません。

    なので、アクションフックに加えてさらに手間がかかってしまいます。

    そこまでしなくてもよいのではないかと思います。(動作保証外ですし…)

    #47143

    対馬 俊彦
    参加者

    すみません。誤解があるかもしれないので、補足します。

    そこまでしなくてもよいのではないかと思います。

    この発言は「今回のページヘッダーの件に関しては…」とご理解ください。

    フックを使えるようになるとカスタマイズの幅がうんと広がりますので、
    上記の記事「アクションフックを使ったカスタマイズに挑戦!」はぜひご覧ください。

    #47147

    totti
    参加者

    対馬さま・Drill Lancerさま
    ご指導ありがとうございます。

    トップページ、固定ページ、投稿ページのすべてにおいて、
    ヘッダー画像を同じアスペクト比で表示したいと考えています。
    そのため、今回ご相談させていただきました。

    添付ファイルをご覧いただけますでしょうか。
    トップページに設定した固定ページ「Z」には、Outerブロックを配置し、
    その背景画像にヘッダー用画像を登録。
    Outerブロックの中にレスポンシブスペーサーブロックを配置し、高さを調整しました。
    固定ページ&投稿ページは、ページヘッダー設定を利用しました。
    デスクトップパソコンのモニターを基準に、
    トップページのヘッダー画像と固定&投稿ページのヘッダー画像を揃えた状態が、添付ファイルです。
    ところが、
    これをノートパソコンやスマホで見ると、
    トップページのヘッダー画像と固定&投稿ページのヘッダー画像が揃っていません。
    どの端末でもヘッダー画像を揃える、簡便な手法があれば助かるのですが、何かアイデアがございませんか?

    Attachments:
    You must be logged in to view attached files.
    #47151

    石川@Vektor,Inc.
    キーマスター

    フックなどでページヘッダーを入れても、高さを揃えるという話になると、
    文字が非表示になると高さは揃わないので、

    トップページに配置したダミーのページヘッダーに対して、ブロックの「高度な設定」で特定のCSSクラスを指定して、
    そのクラスに対して、ページヘッダーの文字の上下の余白 + ページヘッダーの文字サイズをCSSで指定するのが良いと思います。

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    #47159

    対馬 俊彦
    参加者

    すべての画面幅で見た目をぴったり揃えるということであれば、Outer ブロックを使うよりも、
    フックを使ってトップページにページヘッダーの HTML を出力して
    必要な CSS を書き足す方がまだ楽な気がしますが、それでも手間がかかりそうです。

    前に投稿された内容を見ると WordPress 初心者とのことですので、敷居は高いと思いますが、
    フックに挑戦してみるとスキルが身につくので、がんばってください。

    #47160

    対馬 俊彦
    参加者

    フックなどでページヘッダーを入れても、高さを揃えるという話になると、
    文字が非表示になると高さは揃わないので

    この問題を安直に解決しようと思ったら、
    トップページのタイトルに全角スペースをひとつ入れておけばよいと思います。

    #47161

    対馬 俊彦
    参加者

    裏技的な方法を紹介します。

    1. まず、ホームページに指定した固定ページ以外にトップページとして表示するための固定ページを作ります。

    2. その固定ページの URL スラッグを top-page とします。

    3. .htaccess に以下の行を追加します。

    RewriteRule ^$ /top-page/ [R=301,L]

    行を追加するのは以下の位置です。

    # BEGIN WordPress
    # "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
    # 動的に生成され、WordPress フィルターによってのみ修正が可能です。
    # これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    RewriteRule ^$ /top-page/ [R=301,L]  ←【ここ】
    </IfModule>
    
    # END WordPress

    これにより、https://etakura.com/ にアクセスしたときに
    https://etakura.com/top-page/ に自動的にリダイレクト(切り替え)されます。

    https://etakura.com/top-page/ はふつうの固定ページですので、
    他の固定ページといっしょの見え方になります。

    これを試す場合は、念のため .htaccess のバックアップをとっておいた方がいいですし、
    自己責任でお願いします。

    #47173

    石川@Vektor,Inc.
    キーマスター

    この問題を安直に解決しようと思ったら、
    トップページのタイトルに全角スペースをひとつ入れておけばよいと思います。

    あー、なるほど、それでいけますね。
    それだったら子テーマのfunctions.phpなどに下記の記述の方が事故率が低いです。

    // トップページに適用するテンプレートファイルを通常の固定ページと同じ singular.php に変更
    add_action('template_redirect', function(){
        if( is_front_page() ){
            get_template_part('singular');
            die();
        }
    });

    余談ですがこうやって解決方法が数種類出てくるのはフォーラムらしくて良いですね。

    #47177

    対馬 俊彦
    参加者

    余談ですがこうやって解決方法が数種類出てくるのはフォーラムらしくて良いですね。

    ですね。私も勉強になります。

    #47186

    対馬 俊彦
    参加者

    自己責任でお願いします。

    とだけ言われても困ってしまうかもしれないので、
    .htaccess を書き換えるやり方で想定される問題点を書いておきます。

    – – – – – – – – – – – – – – – – – – – – – – – – – – –

    ■ 操作ミスによるもの

    .htaccess を書き換えるには、一般的に FTP というしくみを使います。
    操作に慣れていないとファイルを削除してしまうようなミスをしてしまうかもしれません。

    – – – – – – – – – – – – – – – – – – – – – – – – – – –

    ■ Google 検索に載る URL

    Google などの検索エンジンに掲載されるのは

    フロントページ


    ではなく
    https://etakura.com/top-page/
    になります。

    この違和感が気にならないのであれば問題ありません。

    – – – – – – – – – – – – – – – – – – – – – – – – – – –

    ■ Google 検索順位への影響

    トップページ移転の扱いになるので、
    たぶん検索順位への影響はないと思っていますが、
    検証したわけではないので責任が持てません。

    – – – – – – – – – – – – – – – – – – – – – – – – – – –

    【以下、余談です】

    以前に The Events Calendar というカレンダープラグインを使って
    イベント情報のサイトを作ったことがあります。

    私のスキル不足の問題があったかもしれませんが、カレンダーをトップページに
    埋め込むことができず、プラグインが生成するカレンダーの URL を
    トップページとして運用したかったので、このやり方を使いました。

    #47326

    totti
    参加者

    対馬さま 石川社長
    ご指導ありがとうございます。
    バタバタしておりまして、お礼すら遅くなってしまいました。
    大変申し訳ありません。
    ひと段落ついて時間ができたらチャレンジしてみたいと思います。
    またご報告させてください。

14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • このトピックに返信するにはログインが必要です。