- このトピックには14件の返信、2人の参加者があり、最後に
により1ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】 27.2.2
【お使いの Snow Monkey Blocks のバージョン】22.1.0
【お使いの Snow Monkey Editor のバージョン】10.0.4
【お使いのブラウザ】Chrome
【当該サイトのURL】### 実現したいこと
お世話になっております。
SEOを考慮して、アコーディオンブロックのタイトルにh2を付けたいのですが、
方法があれば教えていただければ幸いです。
よろしくお願い申し上げます。いいねをした人: 居ません返信遅くなりすみません！外出先で返信しようと思っていたらパソコンがまさかの電池切れだったため、ひとまず実現に必要な技術だけ書いておきます！
あとでコードを書いてみようと思っていますが、お急ぎであれば下記を参考に書いてみてください。
アコーディオンアイテムの HTML の書き換えなので、
render_block_snow-monkey-blocks/accordion-itemフックを使います。上記トピックでは単純な置換なので str_replace() を使っていますが、今回は開始タグと終了タグの書き換えが必要であり、入れ子を考慮すると単純な置換は難しいので HTML API を使って置換するのが良いと思います。
いいねをした人:書いてみました！WordPress の HTML API で書き換えられるのは属性だけでタグは書き換えられなかったので、PHP の DOMDocument と DOMXPath を使ってみました。
add_filter( 'render_block_snow-monkey-blocks/accordion-item', function( $block_content ) { $doc = new \DOMDocument; $doc->loadXML( $block_content ); $xpath = new \DOMXPath( $doc ); $divsToReplace = $xpath->query( "//div[contains(@class, 'smb-accordion__item__title')]" ); foreach ( $divsToReplace as $div ) { $h2 = $doc->createElement( 'h2', $div->nodeValue ); foreach ( $div->attributes as $attr ) { $h2->setAttribute( $attr->name, $attr->value ); } $div->parentNode->replaceChild( $h2, $div ); } return $doc->saveXML(); } );render_block_{ブロック名}フックが実行されるのはフロントだけで、エディター上では下記変わらないのでご注意ください。いいねをした人:お世話になっております。ご教授いただきましてありがとうございます！
ご返信いただいたコードをMy Snowmonkeyへ記述することですぐにh2の挿入が叶いました。大変助かりました。本当にありがとうございます。
いいねをした人: 居ませんあーほんとですね…。僕が DOMDocument に詳しくなく、入れ子を維持したままタグの置換をおこなう方法がよくわからなかったので、
preg_replace()を使ってspan.smb-accordion__item__title__labelをh2.smb-accordion__item__title__labelに置換するコードを書いてみました。入れ子の深いところをh2に置換するので HTML にこれで良いのかよくわかりませんが、とりあえず置換はうまくいきました。add_filter( 'render_block_snow-monkey-blocks/accordion-item', function( $block_content ) { return preg_replace( '|<span class="smb-accordion__item__title__label">(.+?)</span>|ms', '<h2 class="smb-accordion__item__title__label">$1</h2>', $block_content ); } );ただ、Snow Monkey Blocks のアップデート等により、クラス名が変わったり
spanに属性が追加されたりすると、この置換処理は効かなくなるので、その点はご注意ください。いいねをした人:お忙しいところご対応いただきましてありがとうございます！
>>Snow Monkey Blocks のアップデート等により、クラス名が変わったり span に属性が追加されたりすると、この置換処理は効かなくなるので、その点はご注意ください。
メンテナンス性を考えると、先にご教示いただきました「PHP の DOMDocument と DOMXPath使用のコード」の方が良いでしょうか？
その場合、矢印は何かしら擬似でつけるという方法も考えます。どちらもSnow Monkey Blocks のアップデートに影響が出る可能性が同じなら、
矢印が付いている後のコードを使用させていただきたいと考えております。いいねをした人: 居ませんメンテナンス性を考えると、先にご教示いただきました「PHP の DOMDocument と DOMXPath使用のコード」の方が良いでしょうか？
そうですね、文字列置換ではないのでその方が多少リスクは低いとは思います。
いいねをした人:お世話になっております。
入力済みのアコーディオンを編集したところ、以下のエラーが出てしまいました。お忙しいところ恐れ入りますが、ご確認いただければ幸いです
Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: br line 3 and p in Entity, line: 3 in XXX/wp-content/plugins/my-snow-monkey/my-snow-monkey.php on line 204
Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: p line 3 and div in Entity, line: 4 in XXX/wp-content/plugins/my-snow-monkey/my-snow-monkey.php on line 204
Warning: DOMDocument::loadXML(): Premature end of data in tag div line 2 in Entity, line: 5 in XXX/wp-content/plugins/my-snow-monkey/my-snow-monkey.php on line 204
いいねをした人: 居ませんあー
Opening and ending tag mismatch: brとあるのでbrが閉じてないのだと思います。<br />じゃなくて<br>になっているのかなと。多分 WordPress のデフォルトが<br>なのだと思うので、DOMDocument::loadXML()する前にstr_replace()で<br>を<br />にするとかが必要なのかもしれません。いいねをした人:ご返信ありがとうございます。
こちらのコードを使ってみまして、エラーは出なくなりましたがいかがでしょうか。// アコーディオンのタイトルをh2にする add_filter( 'render_block_snow-monkey-blocks/accordion-item', function( $block_content ) { // <br> を <br /> に置き換え $block_content = str_replace('<br>', '<br />', $block_content); $doc = new \DOMDocument; // XMLエラーを避けるための設定（警告を抑える） libxml_use_internal_errors(true); $doc->loadXML( $block_content ); // XPathを使用して div 要素を検索・置換 $xpath = new \DOMXPath( $doc ); $divsToReplace = $xpath->query( "//div[contains(@class, 'smb-accordion__item__title')]" ); foreach ( $divsToReplace as $div ) { $h2 = $doc->createElement( 'h2', $div->nodeValue ); foreach ( $div->attributes as $attr ) { $h2->setAttribute( $attr->name, $attr->value ); } $div->parentNode->replaceChild( $h2, $div ); } return $doc->saveXML(); } );いいねをした人: 居ません僕も
DOMDocument・DOMXPathは使ったことがないのでこれで問題ないと断言はできないのですが、エラーがでていないのであればひとまず大丈夫なのではないかと思います。アコーディオンの中身を書き換えたときにまたエラーがでるようなら調整が必要かもしれません。いいねをした人:お世話になります。
編集してもエラーは出ないのですが、
ソースを確認すると、h2の中身（タイトル部分）が、「&#x〜」になってしまっていました。アコーディオンのタイトルをh2にするのは以下を使った方が良いでしょうか。
その場合、アップデート時に気が付かずいつの間にかh2では無くなっている可能性がありますよね・・・add_filter( ‘render_block_snow-monkey-blocks/accordion-item’, function( $block_content ) { return preg_replace( ‘|<span class=”smb-accordion__item__title__label”>(.+?)</span>|ms’, ‘<h2 class=”smb-accordion__item__title__label”>$1</h2>’, $block_content ); }
いいねをした人: 居ません
- トピック「アコーディオンブロックのタイトルにh2を付ける方法」には新しい返信をつけることはできません。