フォーラムへの返信
-
投稿者投稿
-
自分がもし実装するとしたら、再利用ブロックを使ってフッターの作成、あとで編集しやすいように考えます。
前提として…
外観→カスタマイズ(カスタマイザー)→デザイン→フッターを以下のように設定します。- PC 時のフッターウィジェットエリアのカラム数:1
- タブレット時のフッターウィジェットエリアのカラム数:1
- □フッターを全幅にする にチェックを入れる
※フッターをコンテンツ幅にするなら不要
以下のいずれかのプラグインを有効化して『再利用ブロック』を左メニューに表示&ショートコードを利用できるようにします。
再利用ブロック内でフッターのレイアウトを作成→保存します。
そしてショートコードをコピー。
ウィジェットメニューの「フッター」にショートコードブロックを置き、ショートコードをペーストします。
フッター内の上下のpaddingが不要ならCSSを追記.l-footer .l-footer-widget-area { padding: 0 !important; }
こんな流れで独自のフッターを設置できると思います。
参考サイトのフッターだと 再利用ブロック内でカラムブロック(全幅)を利用すれば近いイメージになると思います。カラムの調整はしていませんが、10分程度で以下のフッターができました。
よかったら1つの方法として参考にしてください。メンテナンス性が悪いうえに、強引な方法なので不具合出るかもしれませんが、以下で実装可能かと思います。
@media screen and ( max-width: 768px ) { /* 【カバー】ブロックの「高度な設定」で指定したクラス名 */ .fixed_bg { overflow: hidden; } /* Snow Monkey Blocksで指定した画像は使用しない */ .fixed_bg .has-parallax { display: none; } /* 都合が悪いのでブロック設定で設定したオーバーレイの数値を戻す */ .fixed_bg .wp-block-cover__background { opacity: 1 !important; } /* 新たにスマホ用にオーバーレイを指定 */ .fixed_bg .wp-block-cover__background::before { background-color: #CD162C; /*任意*/ content:""; display:block; position:fixed; top:0; left:0; z-index:0; opacity: .7; /*オーバーレイの不透明度*/ width:100%; height:100%; } /* 新たに背景画像を指定 */ .fixed_bg .wp-block-cover__background::after { content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background-repeat: no-repeat; /* 位置は任意で調整 */ background-position: 20% center; /* 画像はPC用と同じものを使用 */ background-image:url('https://demo.gonsy.net/wp-content/uploads/2022/12/david-maunsell-nVRxhLH74iw-unsplash.jpg'); /* 適宜調整 */ background-size: 1200px; } }
実装したページ1つのCSSですべてのカバーブロックに適用させることはできませんが、参考になれば幸いです。
こちらに提示されているコードで可能だと思います。
お試しください。過去のトピックが参考になると思います。
実際に再現したサイトを制作しています。よかったらイメージの参考にしてください。このアドオンそのものですね。
Snow Monkey Footer CTAコンバージョン率を高めるために、フッターにボタンを固定表示できるアドオン(Snow Monkey 専用のプラグ…snow-monkey.2inc.org検討してみてください。
フローティングメニューを表示
完成イメージがわからないのですが、メニューということはナビゲーション機能ですか?
PCもスマートフォンにもフロートしたメニュー(ナビゲーション)を設置したいということでしょうか?ちょうどこのスノーモンキーのサイト下部に表示されている『試用を申し込む』ボタンのようなものです。
『試用申し込みのボタン』なら、このアドオンになります。
手間をかけずに設置したいなら妥当だと思います。Snow Monkey Footer CTAコンバージョン率を高めるために、フッターにボタンを固定表示できるアドオン(Snow Monkey 専用のプラグ…snow-monkey.2inc.orgワードプレスの無料プラグインを片っ端から調べました。アイコンを入れられるものはあっても文字まで入れられるものが見当たりませんでした。
メニューではありませんが、過去にこのフォーラムでも紹介した下記のプラグインであれば文字や画像の挿入が可能です。
一からオリジナルで作成したいのですがコードをどこに記述すれば良いのかわかりません。
サイトで使用していないウィジェットエリアを使い、ブロックでレイアウト、(Classic WidgetならHTML)したあと、CSSで
position: fixed
などを当ててフロート化/装飾する方法もあると思います。またsnow monkeyの場合、挿入するフックがあるのかと思い
挿入する場所を可視化した素晴らしいサイトがありますので、ご参照ください。
フックは、My Snow Monkeyの利用を推奨します。
いずれも完成イメージを提示してもらえれば、より具体的なアイデアも出せると思います。
一応検証済みですが、ほかに影響が出ないとも言えません。
まずはローカル環境などで試してみてください。
/** * ページタイトルを任意の名前に変更 * <h1 class="c-entry__title">ここ</h1> */ add_filter( 'snow_monkey_template_part_render_template-parts/archive/entry/header/header', function ($html) { $category_titles = array( 'カテゴリAのスラッグ' => 'Works', 'カテゴリBのスラッグ' => 'Profile' ); $category_slug = get_query_var('category_name'); if (array_key_exists($category_slug, $category_titles)) { $html = preg_replace( '|(<h1 class="c-entry__title">.*?</h1>)|ms', '<h1 class="c-entry__title">' . $category_titles[$category_slug] . '</h1>', $html ); } return $html; } ); /** * メタタイトルを任意の名前に変更 * <title>ここ - サイト名</title> */ add_filter( 'single_cat_title', function ($title) { $category_titles = array( 'カテゴリAのスラッグ' => 'Works', 'カテゴリBスラッグ' => 'Profile' ); $category_slug = get_query_var('category_name'); if (array_key_exists($category_slug, $category_titles)) { $title = $category_titles[$category_slug]; } return $title; } );
♥ 0いいねをした人: 居ませんこちらですが、my-snowmonkeyではdisplay:none;を記述しておらず、検証ツールを見るとcssの箇所に(index)と表示されているのですが(画像を添付します)、こちらはどこでdisplay:block;に変更できるものでしょうか…?
<style type="text/css" id="wp-custom-css"> /*固定のタイトルを非表示*/ header.c-entry__header { display: none; }
カスタマイザーの【 追加 CSS 】の先頭に書かれてますよ。
♥ 0いいねをした人: 居ませんサイトのご提示ありがとうございます。
こちらですが、cssではなくアーカイブページのカスタマイズで、ウィジェット編集の「アーカイブページ上部」から設定いたしました。画像を添付いたします。
セクションブロックのウィジェットをアーカイブ上部に設置しているようですね。
これだとカテゴリーごとに表示を切り替えることは難しいと思います。
仮にウィジェットでできたとしても、ページの上部に任意のタイトル(見出し)がついているだけで<title></title>
(メタタイトル)を変えることはできず、メタタイトルとページ名が異なることになります。
タイトルを変更したいというページのコードを見ると.c-entry__header
がdisplay: none;
されていますが、この部分のタイトルとメタタイトルをフックで変えることは可能だと思います。
my-snow-monkey.php
にコードを記述することになりますが、各ページのレイアウトの変更も必要となると思います。今はもう
20.5.0
になっているので、それほど影響はないと思いますが、今回の件でアップデートしてもらったので責任を感じてます。すみません。
ユーザーの皆様、私からもお詫びいたします🙇♥ 0いいねをした人: 居ませんキタジマさん
試しました。バッチリです。
ご対応ありがとうございました!
トピック閉じます😃♥ 0いいねをした人: 居ません【当該サイトのURL】 の提示がないので詳細なことはわかりませんが、このタイトルはSnow Monkey の通常のページタイトル(アーカイブ)に使われている装飾と異なります。
これはCSSで装飾されていますか?またはほかの方法で「Archive」のタイトルをつけていますか?
通常のHTMLは<header class="c-entry__header"> <h1 class="c-entry__title">Archive</h1> </header>
となっていて、
<h1 class="c-entry__title">Archive</h1>
をカテゴリーごとに任意のタイトルに変更することは可能です。
サイトのURLを提示されたほうが解決につながりやすいと思いますので、検討してみてください。♥ 0いいねをした人: 居ません -
投稿者投稿