フォーラムへの返信
-
おすすめというわけではありませんが、SVGのアップロードをしないやり方の１つです。
ボタンの右に配置するSVG画像がボタンごとに異なる場合や別の管理者でも簡単に変更をしたい場合は得策ではなく、メンテナンス性もよくありませんが…
- Snow Monkey「ボタン」ブロックを配置
- その「ボタン」ブロックに「高度な設定」→「追加CSSクラス」でクラス名を付与
- カスタマイズの「追加CSS」や読み込んでいるCSSに.クラス名 a:afterを追加
- そのCSSにbackgroundでエンコード（base64）したSVGを設定＋位置調整
こんな感じで設置もできると思います。
いいねをした人:
貼っていただいたプラグインが前提ということですね。
実現したい内容としましては、投稿ページに対して、「カスタムHTML」を使用した絞り込み機能を実装したいと考えております。また固定ページの編集方法と同様にブロックを用いてレイアウトを整備したいため、ご質問させて頂きました。
「カスタムHTML」とのことですが「投稿ページ」に表示設定すると、その固定ページは編集できず、独自のレイアウトは作成できません。
まったく独自のレイアウトで表示したい場合、ブロックも使用できませんが、home.phpやarchive.phpを上書きするようにテーマを用意するのが良いと思います。
Snow Monkeyの投稿一覧の上に検索フォームを入れるなら・・・
snow_monkey_before_archive_entry_content
など、フックを利用して、投稿ページの先頭にプラグインが生成するショートコードを入れる方法が現実的かと思います。add_action( 'snow_monkey_before_archive_entry_content', function() { ?> <div class="serch-form"> <?php echo do_shortcode('[searchandfilter fields="search,category,post_tag"]'); ?> </div> <?php } );いいねをした人:
画像に書いてあるとおりですが・・・
- ログインして「投稿ページ」に設定しているページを開いた状態でツールバーの「カスタマイズ」を選択。
- デザイン → アーカイブページ設定 → アイキャッチ画像の位置「ページヘッダーの上にタイトルを表示」に設定
でいかがでしょうか？
見当違いならごめんなさい。いいねをした人:
設定＞表示設定＞ホームページの表示
上記にて、「固定ページ」にチェックを入れ、「投稿ページ」に作成した固定ページを設定しました。投稿ページに設定した固定ページを編集しようとしたところ、通常の固定ページ編集とは違う表示となっており、プレビューを見ると投稿の一覧が表示された状態となっております。
WordPressがそういう仕様だから、だと思います。
こちらを通常の固定ページのようにレイアウト等を編集する方法はございますでしょうか。
いくつか方法があると思います。
表示させたいのが投稿ページ（一覧）ではない場合、なぜ投稿ページに設定されたのか、また、どのようなレイアウトを再現されたいのか、イメージ画像があったほうが回答が得られやすいと思います。いいねをした人:
キタジマさん
そうなんですね。
不具合ではないとのことでしたので理解しました。状況に合わせ、必要ならCSSで調整するのがベターですね。
ご返信ありがとうございました。
ということで、トピックを閉じます。いいねをした人:
プラグインを1つ追加しますが、「WPAW:PRボックス」を使用しない別のアイディアを提案したいのです。
まず、Snow Monkey エキスパートのオレインさんが作られた Easy Access Reusable Blocks というプラグインがあります（すごく便利です）。
このプラグインは、再利用ブロックの管理メニューを管理画面・左メニューに追加（表示）できるのと、再利用ブロックごとにショートコードが発行できます。プラグインを有効化して、「英語保育園」「小学生英語学童」と個々に名前をつけて再利用ブロックを作成します。
それぞれにショートコードが生成されますので、ウィジェットのフッターにテキストを使って入れます。3カラムなので、画像のようになると思います。
ウィジェットの管理ページに移動せずに情報の差し替えなどができたり、少し複雑なことができると思いますので、おすすめします。
余談ですが、ブロックエディタになっていないWooCommerceの商品ページを作成する際、少し複雑なレイアウトを使いたいときにこのプラグインが超役立ちました。
いいねをした人:
「my-snow-monkey.php」にフックを使用し、フッター上部にHTMLを出力し、スタイルを整えました。
フックのHTMLを
!is_single()などの条件でコントロールするのはいかがでしょうか？いいねをした人:
どんな要素（ブロック）かにもよりますが、背景が白の要素にbox-shadowで背景をつけるのではダメですか？
box-shadow: 10px 10px 0 rgb(240, 52, 2);いいねをした人:
@yasuki さん
こんにちは。
Snow Monkeyにもアニメーション機能がついていますが、あえてAOSを使うなら、こんな感じでmy-snow-monkey.phpに記述すればいいのではないかと。
add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' ); function msm_enqueue_style_script() { wp_enqueue_style( 'msm_style', MY_SNOW_MONKEY_URL . '/style.css', [], filemtime( MY_SNOW_MONKEY_PATH . '/style.css' ) ); } add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'aos-style', 'https://unpkg.com/aos@2.3.1/dist/aos.css', [], false ); wp_enqueue_script( 'aos', 'https://unpkg.com/aos@2.3.1/dist/aos.js', [], false ); wp_enqueue_script( 'my_scripts', MY_SNOW_MONKEY_URL . '/app.js', [], filemtime( MY_SNOW_MONKEY_PATH . '/app.js' ), true ); } );あと、AOSはjQuery非依存なので、わざわざ読み込む必要はありません。
Snow Monkeyはカスタマイズも楽しいので、いろいろ試してみたくなりますよね。
このフォーラムも勉強になりますが、WordPressも一緒に学習していくと、もっとハマっていろんなことができると思います。いいねをした人:
@shimatate さん
こんにちは。
フォームで入力内容の確認画面が必須でないようであれば、Contact Form 7 ＋ Contact Form 7 – Conditional Fields でお望みの形に近いフォームになるのではないでしょうか。
Contact Form 7用の基本的なCSSはSnow Monkeyに実装されているので、比較的導入しやすいと思います。Contact Form 7 – Conditional Fields では、表示されていない“必須項目”はエラーになりません。
プラグインの使用方法を解説しているブログ記事などもありますので、時間があればぜひお試しください。https://ja.wordpress.org/plugins/cf7-conditional-fields/
いいねをした人:
@Mobby さん
その部分に一文追加するだけで良ければフックがあります。
woocommerce_proceed_to_checkoutMy Snow Monkey（プラグイン）を利用されているようなら
my-snow-monkey.phpにadd_action ( 'woocommerce_proceed_to_checkout', function () { ?> <p class="memo_memo">配送に関する注意書きを入れます。</p> <?php } );とすると表示されると思います。
いいねをした人:
