フォーラムへの返信
-
投稿者投稿
-
検証しました。ちょっと現状の Snow Monkey ではできないのですが、v4.3.0 ベータ3からはできるようになります。ということで、一応先にコードだけ提示しますね。
子テーマの functions.php
/** * [my-accordion] というショートコードを定義 */ add_shortcode( 'my-accordion', function() { ob_start(); ?> ここに参考ページの HTML を貼り付け <?php return ob_get_clean(); } ); /** * Snow Monkey ウィジェットでショートコードを実行可能に */ add_filter( 'inc2734_wp_awesome_widgets_render_widget', 'do_shortcode' );CSS を追加
カスタマイザー > 追加 CSS、もしくは、子テーマの CSS ファイルに、参考ページの CSS を貼り付け
リード文に入力
[my-accordion]と入力してください。♥ 0いいねをした人: 居ませんあれなんであろう…
上記の
search.phpのコード、< ?phpとなってしまっていましたが正しくは<?phpなのでそれかもしれません！変更してみてください！♥ 0いいねをした人: 居ませんあ、こんなにめんどくさいことしなくてもショートコードにしちゃったほうが簡単かも！ちょっと試してみます！
♥ 0いいねをした人: 居ませんショーケースのリード文は、「WordPress の記事編集画面で許可されている HTML のみ入力可能」で「自動改行が有効」となっており、
inputタグが入力できず、複雑な HTML を入力するのにあまり向いていないため、基本的には、このアコーディオンを入れることはおすすめできません。という前提で、一応やる方法はあるので、共有します。
子テーマの functions.php に下記のコードを追加
まず、
inputタグが除去されないように許可する必要があります。下記のコードを追加することで許可されるようになりますが、これは「リード文」の部分だけでなく、WordPress 全体で許可される、ということになり、セキュリティ上好ましくない可能性がありますので、繰り返しますがあまりおすすめはできません。add_filter( 'wp_kses_allowed_html', function( $tags, $context ) { if ( 'post' === $context ) { $tags['input'] = [ 'type' => true, 'id' => true, 'class' => true, ]; } return $tags; }, 10, 2 );リード文に HTML を入力
自動改行の影響を極力避けるため、 HTML コメントと改行を全部抜いて入力してください。下記をコピペしてもらうのが良いかと思います。
<div class="accbox"><div><label for="label1">クリックして表示1</label><input type="checkbox" id="label1" class="cssacc" /><div class="accshow"><p>こんにちは1</p></div></div><div><label for="label2">クリックして表示2</label><input type="checkbox" id="label2" class="cssacc" /><div class="accshow"><p>こんにちは2</p></div></div><div><label for="label3">クリックして表示3</label><input type="checkbox" id="label3" class="cssacc" /><div class="accshow"><p>こんにちは3</p></div></div><div><label for="label4">クリックして表示4</label><input type="checkbox" id="label4" class="cssacc" /><div class="accshow"><p>こんにちは4</p></div></div></div>CSS を追加
カスタマイザー > 追加CSS、もしくは子テーマの CSS ファイルに下記の CSS を追加してください。自動改行の影響を考慮して、元の CSS から若干カスタマイズしてあります。
/*ボックス全体*/ .accbox { margin: 2em 0; padding: 0; max-width: 400px;/*最大幅*/ } /*ラベル*/ .accbox label { display: block; margin: 1.5px 0; padding : 11px 12px; color :#2f8fcf; font-weight: bold; background :#a4cbf3; cursor :pointer; transition: all 0.5s; } /*ラベルホバー時*/ .accbox label:hover { background :#85baef; } /*チェックは隠す*/ .accbox input { display: none; } /*中身を非表示にしておく*/ .accbox .accshow { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .cssacc:checked + p + .accshow { height: auto; padding: 5px; background: #eaeaea; opacity: 1; }♥ 0いいねをした人: 居ませんいろいろやり方はあると思いますが、Snow Monkey のテンプレート階層の流儀に従うなら下記のような感じになると思います。
/子テーマ/search.php
layout( get_theme_mod( 'archive-page-layout' ) ); if ( have_posts() ) { if ( $_GET['fe_form_no'] == '0' ) { // /子テーマ/templates/view/search-form0.php をビューファイルとして読み込み get_template_part( 'search', 'form0' ); } else if( $_GET['fe_form_no'] == '1' ) { // /子テーマ/templates/view/search-form1.php をビューファイルとして読み込み get_template_part( 'search', 'form1' ); } else { // デフォルトのビューファイルを読み込み $controller->render( 'archive', 'search' ); } } else { $controller->render( 'no-match' ); }♥ 0いいねをした人: 居ません解決方法まとめて頂いてありがとうございます！！
$controller->render( 'taxonomy', 'タクソノミー名' );が正しく動かないのはバグで、v4.3 以降では正しく動作するようになります。トピック、クローズします。
♥ 0いいねをした人: 居ませんウィジェットエリアの余白設計も見直したりしているので、その影響があったのかもそれませんね。ご報告助かります、またお気づきの点があったときはぜひ教えてください！
トピッククローズします。
♥ 0いいねをした人: 居ませんウィジェットのクラス名から推測するに、MetaSlider のウィジェットが入っているように思います。
MetaSlider 14205 not foundとあるので、MetaSlider には詳しくないのですが、存在しない MetaSlider を読み込もうとして、その分の余白が表示されているのではないでしょうか？♥ 0いいねをした人: 居ません/snow-monkey/vendor/inc2734/mimizuku-core/src/appを、/snow-monkey/vendor/inc2734/mimizuku-core/src/Appに（appディレクトリをAppに）変更してみてください。おそらくこれで表示されるようになります。その後、v4.3.0 beta2 がリリースされていますので、ダッシュボード > 更新からアップロードしてみてください。
♥ 0いいねをした人: 居ませんお知らせありがとうございます！確認します
♥ 0いいねをした人: 居ません「最初の h2 見出しの上」については実は下記の記事を参考にして実装してみました。
意味はよくわかってないのですが、コピペして実装しています。（JavaScriptなのでしょうか？）この記事では PHP だけを使って実現していますが、これだと
h2が使用されているショートコードなどをプラグインで追加したときに不整合がおこるんですよね。例えば「見出し付きボックス」を追加するようなショートコードプラグインを入れた場合に、ボックスの中にウィジェットが入り込んじゃうみたいな。「h2 見出しの上」ということは、「目次」の表示条件と同じなので、目次の前後にアクションフックを追加し、ちょっとコードを追加すれば見出しの前後どちらかにウィジェットなり任意の HTML なりを追加できるという仕様にしようかなと思います。
「アイキャッチ画像下」に関しては例えば、
・記事タイトル下ウィジットとして全パターンで表示
・アイキャッチが「ページヘッダー」or「アイキャッチなし」の時は、そのまま記事タイトル直下に表示
・アイキャッチが「コンテンツ上」の場合はアイキャッチ下に表示される
とかは難しいのでしょうか？なるほどですね。「アイキャッチ画像下」ではなく、「コンテンツの上」とかにしておくと良いかもなと思いました。
「h2 見出しの上」はちょっと時間がかかるかもですが、「記事のコンテンツ直下（他とあわせる感じでメインコンテンツの直下…とかが良いかなぁ）」「コンテンツの上」は v4.3 に入れ込めるかと思います。
♥ 0いいねをした人: 居ません解決できて良かったです。トピッククローズしますね。
♥ 0いいねをした人: 居ませんなるほどです。「最初の h2 見出しの上」のような文中のどこにくるかがページごとに変わる要素の部分に表示するには、JavaScript を使って、ウィジェットエリアを移動させてくる必要があります。
目次も同様の方法をとっていますが、ウィジェットエリアは目次と違ってデータベースから情報を引っ張ってきたりする処理が重いので、ロード＆移動のときに画面ががくついたり、表示が遅くなったりする可能性が高いと思います。なのでやるとすればオプション的にプラグインで提供するとかが良いかなぁと…。
「記事のコンテンツ直下」は固定的な場所なので追加できると思います。こちらは 4.3 で取り込みます。
「アイキャッチ画像下」も固定的なので問題はないかなと思いますが、アイキャッチ画像を「コンテンツの上」にしたときだけ利用可能なウィジェットエリアということになるので、ユーザーさんによってはよく確認してなくて「あれ？なんででないんだ？」ということになる方が結構いるんじゃないかなぁと…。
もし「ウィジェットであること」にこだわりがなければ、「最初の h2 見出しの上」「アイキャッチ画像下」にアクションフックを追加して、子テーマでそのフックに任意の HTML を表示させる、というほうが処理も軽いし自由度も高くて良いのかなと思いました。そういうのはいかがでしょう？
♥ 0いいねをした人: 居ません
一応確認ですが、上の画像の位置で認識はあっていますでしょうか？
♥ 0いいねをした人: 居ませんまず、WordPress のメニュー機能でメニューをつくり「グローバルナビゲーション」に割り当てる必要があります。下記マニュアルを参考につくってみてください！
もし「グローバルナビゲーション」をすでにつくられていて、それでも表示されない場合は、ヘッダーレイアウトの設定が「シンプル」になっている可能性があります。もし「シンプル」になっている場合は、「シンプル」以外のレイアウトに変更してみてください。
♥ 0いいねをした人: 居ません -
投稿者投稿
