[Olein_jp]

レスポンシブに対応した改行機能という要望は以前からあったと記憶しているのですが、そこの判断は開発者判断ですので僕にはわかりませんが、

VK BLOCKというプラグインを導入すれば使用できるみたいなのですが、Snow Monkey Blocksがありますし似たようなブロックも多いので、できれば、他のブロック系のプラグインは導入したくないかなと考えています。

「他のブロック系プラグインは導入したくない」というお考えの理由次第ではありますが、単純に考えると、プラグインとは機能を WordPress に提供するものですので、必要としている機能を持っているプラグインが存在するのであれば、そちらを採用すれば良いという考え方が WordPress 的な思想となるのかもしれません。

また、分かりませんが、VK Blocks などから既に提供されている機能であるが故に、Snow Monkey Blocks や Snow Monkey Editor　には採用しないという考えなのかもしれません。

話がそれましたが、似たブロックが重複するという理由だけであれば、ブロックマネージャーで非表示にしてしまうということで、管理上の煩わしさは改善されるのかなと思いました。既にお試しかもしれませんが、よかったら参考にしてください。

♥ 0

いいねをした人: 居ません

[Olein_jp]

.sp-slider {
    margin-top: 0 !important;
}

これでいけると思います。

♥ 1

いいねをした人:

[Olein_jp]

実現されたいことはトピックの内容で推測はできます。また、現状も少々理解しました。

その上で僕が感じたところ、「まずは子テーマが何かを知られた方が良い」と思います。

上記に添付されているページにも書いてありますが、Snow Monkey では子テーマでのカスタマイズを「非推奨」としています。ですので、非推奨の方法を選択される場合には、そのデメリットなども理解された上で利用されるべきでしょう。

そう考えると、推測するにカスタマイズ云々という話以前の必要になる前提知識にまずは触れていただいて、その後どう触れてくかということを考える方が良いと思います。

ですので、まずは「子テーマ」について色々と調べて自身で試されてください。

https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

WordPressで子テーマを作成する方法（詳細ガイド）

WordPressの子テーマは、テーマをカスタマイズするための鍵です。子テーマとは何なのか、どのように使用すべきか、そして、WordPressサイトで子テーマを作成する方法をご…

kinsta.com

そして、言われている「テンプレ化」というものですが、自身で実現されるには、もしかしたら多少お時間を要する可能性があります。まずは子テーマへの理解、ならびに Snow Monkey のカスタマイズ方法について知見を深めてみてはいかがでしょうか。

♥ 2

いいねをした人:

[Olein_jp]

どのようにされたいのか次第ですが、以下の点を吟味された方が良いかもしれませんね。

• <div class="c-entry-summary__content"> の直下に挿入するべきなのかどうか
• なぜ .reserve-link に display: flex しているのか

単純に <div class="c-entry-summary__content"> の閉じタグの後に挿入してスタイリングを行えば良いのではないでしょうか？スタイリングに関する知識が必要な場合は検索するとたくさん出てきます。

♥ 0

いいねをした人: 居ません

[Olein_jp]

毎回入力するものに関してはテンプレ化したい

この「テンプレ化」の定義が全くされていないのでアドバイス差し上げることも難しいです。

♥ 0

いいねをした人: 居ません

[Olein_jp]

実際の状況を確認できるURLを共有してください！

♥ 0

いいねをした人: 居ません

[Olein_jp]

方法としては以下のような流れで実現は可能かと思います。

• カスタム投稿タイプに紐付いているカスタムタクソノミー（ライブ情報）を選択した際にリンク先URLを設定できるカスタムフィールドを用意する
• template-parts/loop/entry-summary/content/content or template-parts/loop/entry-summary/meta/meta 辺りにフックでカスタムフィールドを出力させる

ただし、こちらを実現するために必要な知識としては、

• カスタムフィールドを設定・設置
• PHPにてフックの処理を

となります。ただ、

カスタムフィールドを自分で実装したことがないので、まだよくわからず…

と書かれている状態を推測すると、難易度はかなり高めと考えていただいた方が良いかもしれません。

挑戦される場合には、以下のリソースでいけると思います。

Smart Custom Fields の基本的な使い方 | オレインデザイン – 岐阜県岐阜市のWordPress専門家

多くの方が WordPress でウェブサイトを作る際に、必要に応じてカスタムフィールドを活用して、独自の入力フォームと値を投稿や固定ページ、カスタム投稿に持たせるといっ…

olein-design.com

snow_monkey_template_part_render

テンプレートの部分的な書き換えなどを行う際によく利用します。 実験的にここでは、投稿の詳細ページのタイトル部分…

happy-snow-monkey.olein-design.com

♥ 3

いいねをした人:

[Olein_jp]

個人的にインラインでスタイルを入れる方法で実装した経験がほとんどなく、基本的にフロントとエディター向けにそれぞれCSSファイルを用意するというスタイルで実装しています。

分ける一番の理由は、フロント側とエディター側でスタイルの当てからが変わってくる場合があるからです。例えば、Snow Monkey で言うと、コンテンツエリアのラッパークラスをフロント側では利用することで書きやすくなりますが、エディター側ではそのラッパークラスは不要になるからです。

トピックに掲載されているコードを拝見する限り、エディター向けにCSSファイルを用意されているようですので、こちらを使い分けることでもう少し手軽にブロックスタイルを活用いただけるのかなと感じました。

試しに以下のようにブロックスタイルを追加してみました。そして、コンテンツ部分の見出しスタイルは無効にしています。その場合でも正常に動作しています。

add_action(
	'init',
	function () {
		register_block_style(
			'core/heading',
			[
				'name' => 'sample-block-style',
				'label' => 'サンプルブロックスタイル'
			]
		);
	}
);

editor-style.css にはこのように書いています。

.is-style-sample-block-style {
  padding: 1rem;
  background-color: #000;
  color: white;
}

こちらで正常にフロント/エディターともに表示されることが確認できました。こちらをヒントにエディター側のスタイルの書き方を工夫されるとスムーズに実装できそうな気がします。

ご参考にどうぞ。

♥ 0

いいねをした人: 居ません

[Olein_jp]

ブロックスタイル自体も反映されているようですので、CSSの詳細度の問題なのかなと思われます。エディターのラッパークラス（名前忘れてしまいました）を併用した書き方を併記してはどうでしょうか？（未検証ですが）

.editor-wrapper-class-name .is-style-side-line,
.is-style-side-line {
  border-left: solid 10px red;
  padding-left: 15px;
}

♥ 0

いいねをした人: 居ません

[Olein_jp]

素直に Contact Form 7 を使った方が早いのではないでしょうか？

Snow Monkey Forms を使わないといけない理由があるのでしょうか？

♥ 1

いいねをした人:

[Olein_jp]

これ難しい問題だなぁと思っていて、それをすることでどんな画像でも全幅でいけるんですけど、逆に解像度気にしない問題も発生しそうだなーと思うところですね…むずかしや…

♥ 2

いいねをした人:

[Olein_jp]

拝見しましたが、スライダーに設定されている画像自体が小さいのではないでしょうか？拝見したところ、幅1000pxでした。

「全幅表示させたい」の全幅の最大値をどれくらいに定めるかにもよりますが、それよりも大きい幅の画像を設定してみて動作を確認してみてください。

♥ 3

いいねをした人:

[Olein_jp]

該当ページにて、右にサイドバーが表示されるテンプレート（でウィジェットを登録されていない状態等）を選択しているということはありませんか？

該当ページなどを共有できない場合は、スクリーンショットなどを併記されると解決が早いかと思います。

♥ 1

いいねをした人:

[Olein_jp]

Snow Monkey だけで完結しようとするならば、セクションブロックのパララックス機能を利用して実現可能な範囲で〜となるのかなと思います。が、この機能は現在非推奨となっているので、そのあたりは理解の上でとなるかと思います。

あとは、何か別にブロックを用意して活用するというのはあると思います。あとは自前でコードを書くか、ですね。参照サイトのように〜というのであれば、実現するだけであればコードを書いた方が早そうかなとも思いました。（実現できるプラグインのセットを検証するのが大変そうっていう意味です）

♥ 3

いいねをした人:

[Olein_jp]

過去トピックの存在をあさらず配信ネタのために実験してしまったのでソースコードだけ置いておきます。供養させてください…。。

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'vagas_css',
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css'
		);

		wp_enqueue_script(
			'vagas_js',
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js',
			['jquery'],
			null,
			true
		);

		wp_enqueue_script(
			'vagas_function',
			MY_SNOW_MONKEY_URL . '/js/main.js',
			['jquery'],
			filemtime( MY_SNOW_MONKEY_PATH . '/js/main.js' ),
			true
		);
	}
);

Vegas Background Slider を利用するために必要なソースコード（ js/main.js 含む）となりますので、別途スタイルなどは読み込んでくださいね。

ちなみに実験がてら書いた main.js のコードも供養させてください。

jQuery(function($){
  $(".vegas-background-demo").vegas({
    slides: [
      { src: "https://images.unsplash.com/photo-1511884642898-4c92249e20b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" },
      { src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" },
      { src: "https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1642&q=80" },
      { src: "https://images.unsplash.com/photo-1604537466573-5e94508fd243?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" }
    ]
  });
});

任意のセレクタを指定してあげれば実験にでも使えるかもしれません。画像はUnsplashに直リンクしているのでよろしくはないです。

以上、よかったら参考にしてみてください。（過去トピックあるかどうか先に探せばよかった…

♥ 4

いいねをした人:

[投稿者]

投稿