[まーちゅう]

ホームページ設定

ホームページは大きく分けて2つの使い方があります。 1つめは、一般的なブログとして使用する方法。 2つめは 、…

snow-monkey.2inc.org

こちらを参考に

最新のイベント・お知らせ

過去のイベント一覧はこちら[→]

x05.piemx.me

または

記事一覧

話す聴く共に感じる。生きやすさを手に入れる

x05.piemx.me

のどちらかを投稿ページ用の固定ページに割り当てるだけでいいと思います。

1ページ辺りの表示件数は、管理画面の「設定」>「表示設定」の「1ページに表示する最大投稿数」で調整できます。

♥ 1

Who liked:

[キタジマ タカシ]

「カテゴリーを横断した全記事の一覧」というのは、通常の記事一覧ページ（home.php が適用されるページ）で良いのでは？と思ったのですが、どうですかね？

ホームページの設定

ホームページは大きく分けて2つの使い方があります。 1つめは一般的なブログとして使用する方法、2つめは Web…

snow-monkey.2inc.org

それともカスタム投稿タイプも含んだ全記事ということでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

やってみたのですが、結論から言うと、実現方法がわかりませんでした。何とか無理くりやればできないことはないのかもしれませんが、ちょっと僕の技術力ではメンテナブルな良い方法が思い浮かばず…。

一応頂いたコードでご指摘できる部分については書いておきます。

・snow monkey formsのコード

checkboxes-xxxxx の選択肢を追加しているコードに見えますが、特に動的に何かをしているようには見えなかったので、動的に項目の増減等が不要なのであればフォームの作成画面で設定してしまうのが簡単だと思います。

・JavaScript

Snow Monkey Forms は入力・確認・完了・エラーの画面遷移を JavaScript で動的に行っているので、$('[name="checkboxes-xxxxx[]"]').change(function() のような要素の指定だと、画面遷移したら DOM からイベントが取れてしまいます（JavaScript で動的に再取得された要素は、同じ名前でも別の要素と判定される）。

なので、動的な要素にも対応させるには $(document).on('change', '[name="checkboxes-1hojjnt8j[]"]', function() { のような書き方に変える必要があります。

—

入力画面については、頂いたコードをベースに↑の修正を入れて調整すれば実現できるそうでしたが、そこから管理画面にいって入力画面に戻ったり、バリデーションエラーがあってエラー画面になったりしたときにも選択肢に応じて正しく画像を表示させるのが、どうやったら良いのだろう…という感じでした。

♥ 1

Who liked:

[shone]

＞キタジマさん

ご返信いただきありがとうございます！

僕も特にそういうのをつくった経験はないので、試したコードがあるのであればそれを共有してください！（それをもとにやったほうが簡単かなと思うので）

こちらかしこまりました。

ただ私自身がJavaScriptやjQueryの知識に乏しくほとんど何もわからない素人なので、色々検索しつつChatGPTと問答しながら試してみたという状況なのですが…ChatGPTも最初にsnow monkey formsのコードを読み込ませてそれを前提にしているはずが途中でコードを無視したりと、結局うまくいかずじまいでした。。。

ですので参考になるかはわかりませんが、一応、最終的に提示されたコードを共有させていただきます。

・snow monkey formsのコード

add_filter(
	'snow_monkey_forms/checkboxes/options',
	function( $options, $name, $setting ) {
		if ( 'checkboxes-xxxxx' === $name ) {
			return array(
				'option-1' => 'あいうえお',
				'option-2' => 'かきくけこ',
				'option-3' => 'さしすせそ',
			);
		}
		return $options;
	},
	10,
	3
);

・JavaScript

jQuery(document).ready(function($) {
	// チェックボックスの選択状態が変わるたびに実行
	$('[name="checkboxes-xxxxx[]"]').change(function() {
		// すべての関連画像を非表示にする
		$('.image-for-checkbox').hide();

		// 選択されているチェックボックスに応じて画像を表示
		$('[name="checkboxes-xxxxx[]"]:checked').each(function() {
			var selectedValue = $(this).val();
			// 対応する画像のIDに基づいて画像を表示（例: #image-for-option-1）
			$('#image-for-' + selectedValue).show();
		});
	});
});

・画像表示（HTML）

<img id="image-for-option-1" src="画像のURL" style="display:none;" alt="説明">

・画像表示（PHP）

 

<img id="image-for-option-1" src="<?php echo get_template_directory_uri(); ?>/path/to/image.jpg" style="display:none;" alt="説明">

以上になります。
お手数ですがお手すきの際にご確認いただけますと幸いです。

♥ 0

Who liked: No user

[キタジマ タカシ]

スクショありがとうございます！記事編集画面でのタームの UI がタグと同じものになっていますね。これはそのカスタムタクソノミーが「階層なし」になっているためです。「階層あり」にすれば UI がカテゴリーと同じものになり、それでタームを設定すれば一覧にカテゴリーラベルが表示されるようになります。

♥ 0

Who liked: No user

[otomeweb]

カスタム投稿でタクソノミー選択がでないので、自由追加をつかって未設定といれたらでました
結局、紐付けがうまくいってないのが原因のようです　SnowMonkeyの問題じゃなくって
Custom Post Type UIの問題ですよね…すみません　行き詰まってます

 

タームってこれですよね…

お知らせ

話す聴く共に感じる。生きやすさを手に入れる

x05.piemx.me

 

like minds

対話の杜へようこそ v0.1

x05.piemx.me

カスタム投稿タイプ

カスタムタクソノミー

投稿画面

♥ 0

Who liked: No user

[キタジマ タカシ]

なるほどです。Snow Monkey Forms 自体には特にそういった機能はないので、独自に JavaScript や jQuery で仕組みを作る形になります。

僕も特にそういうのをつくった経験はないので、試したコードがあるのであればそれを共有してください！（それをもとにやったほうが簡単かなと思うので）

♥ 1

Who liked:

[otomeweb]

もう一点すみません、この「イベント」のタクソノミーアーカイブページの URL も教えてもらえますか？

イベント

対話の杜へようこそ v0.1

x05.piemx.me

とはちがいますか？

カスタムタクソノミーをプラグインで追加している場合は、多分そのカスタムタクソノミーの設定画面に public とか 公開する みたいな設定があるのではないかと思うので、確認してみてください。

Custom Post Type UI 1.15.1　を使ってます

公開：True
(デフォルト: true) タクソノミーが管理インターフェイスまたはフロントエンドユーザーによってパブリックに使用されるかどうか。

となってます

投稿タイプのタクソノミーでも該当タクソノミーが選ばれています。

しかし投稿画面でタクソノミーの選択リストが表示されていません。
プラグインの設定を見てみます。

♥ 0

Who liked: No user

[shone]

＞キタジマさん

 

ありがとうございます！

今再度確認してみたところ、なぜか自分でCSSに追記しなくてもunderlineが正常に表示されているようでした…？？

 

ただ元々PC時には解除ボタンはファイルをアップしない状態でも表示されていて、今はファイルを一度アップしないと解除ボタンが表示されず、また表示位置もさきほどまではボタンのすぐ近くにあったのが今は右端に寄っているようで…？？

特にプラグイン等更新したわけでもないので何か変更が入ったとも考えにくいのですが、とりあえず原因不明ですがこちら解決しました、ありがとうございました…！

 

こちらのトピックは、とりあえず暫定的にCSSでの対処法を教えていただきましたが正式にアップデートいただくまで閉じないほうがよろしいでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

例えば

[x] 晴れ
[ ] 雨

<img src="..." alt="晴れ">

というフォームがあったとして、「雨」を選択すると画像も「晴れ」から「雨」に変わる、みたいなことでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

デベロッパーツールで「解除」のところを選択すると、どのような CSS がどの CSS ファイルから当たっているかが確認できるので、text-decoration がどの CSS ファイルから当たっているかを確認すれば原因がどこかわかるかもです。

♥ 0

Who liked: No user

[キタジマ タカシ]

ありがとうございます！

利用する投稿タイプはイベントのみチェックしています

もう一点すみません、この「イベント」のタクソノミーアーカイブページの URL も教えてもらえますか？

一点気になったのが、「対話の庭 vol.6」を開いたときに、パンくずリストが

ホーム > イベント >  対話の庭 vol.6

つまり、

ホーム > カスタム投稿アーカイブ > 記事

となっている点です。何らかのタームに割り当てられているときは、

ホーム > カスタム投稿アーカイブ > ターム > 記事

となるようにしているんですよね。例えばこのサイトでいうと、パターンライブラリーはカスタム投稿なのですが、記事ページに行くと

ホーム  > パターンライブラリー（カスタム投稿アーカイブ） > FAQ（ターム） > FAQ-123440

のように、パンくずにカスタムタクソノミーアーカイブへのリンクも含まれています。

FAQ-123440

Lorem ipsum dolor sit amet consectetur adipiscing elit,…

snow-monkey.2inc.org

多分ここが出ていないのと、一覧でカテゴリーラベルが出ていないのは同じ原因な気がしていて、例えばよくあるのだと

– タームが割り当てられていない
– そのカスタムタクソノミーが public ではない
– カスタム投稿タイプとカスタムタクソノミーが関連付けられていない

などです。

カスタムタクソノミーをコードで追加している場合、

register_taxonomy()　の引数で public が true になっていればカスタムタクソノミーアーカイブが公開されますが、 false だと 404 になります。

register_taxonomy() | Function | WordPress Developer Resources

Creates or modifies a taxonomy object.

developer.wordpress.org

カスタムタクソノミーをプラグインで追加している場合は、多分そのカスタムタクソノミーの設定画面に public とか 公開する みたいな設定があるのではないかと思うので、確認してみてください。

♥ 0

Who liked: No user

[shone]

＞キタジマさん

 

早速のご返信ありがとうございます！

いただいたCSSでひとまず折り返しが入ること確認できました、ありがとうございます。

アップデートでもご対応いただけるとのことで、正式リリースお待ちしております。

 

※ボタンの真下ではなくやや右に配置されているのはこういうものでしょうか？

 

これはこちらの環境では下線が表示されているっぽいです。もし独自に CSS を追加されているのであれば、その影響がないか確認してみてください。

 

こちらもご確認ありがとうございます！
私もCSS関連かなと思い見てみたのですが該当するような記述は見当たらず、試しに追加CSSに記述しているものを全て削除してプレーンな状態にしてみたのですが、変わらず下線は表示されずでした…

 

とりあえずsmf-file-control__clearにtext-decoration: underlineで下線表示させましたが、根本解決していないのでどこか別のところでも影響出ていないかな～と思っています…
何か導入しているプラグインでCSS当たっていて、その影響とかも考えられるでしょうか。

♥ 0

Who liked: No user

[キタジマ タカシ]

本来折り返しがきくべきところだと思うのですが、効いていないようです。

これはもともとの CSS の設計が甘かったようです。確認してアップデートで修正を入れたいと思います。お急ぎであれば .smf-file-control と .smf-file-control > label を flex-wrap: wrap !important すればとりえあえずは折り返すと思います。

また直接関係はなさそうですが、「解除」ボタンもテキストリンク？のアンダーラインがアップデート情報の参考画像では付いていたと思うのですが、こちらも付いていないようで、これは何か原因がありますでしょうか？

これはこちらの環境では下線が表示されているっぽいです。もし独自に CSS を追加されているのであれば、その影響がないか確認してみてください。

♥ 0

Who liked: No user

[キタジマ タカシ]

実際にはメディアクエリというか、PHPでの条件分岐の書き方の情報だったのかなと思いました。

なるほどです。記事をみた感じだと、確かにメディアクエリではなくて UA で条件分岐させる方法みたいでした。

『Blocks Animation: CSS Animations for Gutenberg Blocks』プラグインを別で入れているので、こちらを使い別ページのブロック内で仮にアニメーションを付与したバナー画像を作り、ブロックをHTML化することでCSSへの追加記述無く簡単なアニメーションまで実装できました。

アニメーションも便利なプラグインがあるんですね…。

解決済みということで、トピックのクローズをお願いします！

♥ 1

Who liked: