WordPress Snippet

ワードプレスをカスタマイズしよう

WordPress 4.8.1 HTML Code Widget

投稿日: by

WordPress 4.8.1で、HTML Code Widgetが追加される模様です。

従来からあるテキストウィジェットが、リッチエディタに変更される中で(4.8) 自動的なp要素補完テキスチャライズ処理を行わないものです。(4.9-alpha-40897)

WordPress 4.8.1 のHTML Code Widgetは、4.9の開発版とは、異なる実装が行われたようです。

widget_html_code_content フィルターはありません。フィルター名が widget_custom_html_content に変更になったようです。

現物にあたると、WP_Widget_Textクラス内で、調整が行われている模様 wp-includes/widget/class-wp-widget-html-code.phpも存在しませんでした。

4.9の開発版では、(4.9-alpha-41294)このファイルは依然として存在しているので、この先の変更はどうなるのか今のところわかりません。

4.8.1のソース

<ul>
	<li id="custom_html-3" class="widget_text widget_custom_html widget sticky-widget" tabindex="-1">
		<h2 class="widgettitle home-top-content h2">
			<span>hello</span>
		</h2>
		<div class="textwidget custom-html-widget">world</div>
	</li>
	<li id="text-13" class="widget_text widget sticky-widget" tabindex="-1">
		<h2 class="widgettitle home-top-content h2">
			<span>ビジュアル</span>
		</h2>
		<div class="textwidget">
			<p>hello</p>
		</div>
	</li>
</ul>

開発版でのソース

<ul>
	<li id="custom_html-3" class="widget_text widget_custom_html widget sticky-widget" tabindex="-1">
		<h2 class="widgettitle home-top-content h2">
			<span>hello</span>
		</h2>
		<div class="textwidget custom-html-widget">world</div>
	</li>
	<li id="text-4" class="widget_text widget sticky-widget" tabindex="-1">
		<h2 class="widgettitle home-top-content h2">
			<span>ビジュアル</span>
		</h2>
		<div class="textwidget">
			<p>hello</p>
		</div>
	</li>
</ul>

上記はRaindropsテーマでの開発版と、4.8.1のhtmlソースで、どちらも同様のソースを出力するようですが、異なるウィジェットとして、Classが定義されているべきでしょうが、widget_custom_html、custom-html-widgetクラスをたんに追加しただけになっており、非常にコンフリクトしやすい形(widget_text等共通クラスがあるため)になっており、スタイルを記述する場合は、十分に注意する必要がありそうです。

ウィジェットが出力するソース(4.9-alpha-40897)

<li id="html_code-6" class="widget_html_code widget default">
	<h2 class="widgettitle default h2"><span>hello html code widget</span></h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</li>

本文のフィルター widget_html_code_content

add_filter( 'widget_custom_html_content', 'my_html_code_content', 10, 3 );

function my_html_code_content( $content, $instance, $this ) {

	if ( 'タイトル文字列'== $instance['title'] ) {
		return '何か処理 ' . $content;
	}
	return $content;
}

カスタムhtmlウィジェットで、ショートコードを有効化

add_filter( 'widget_custom_html_content', 'do_shortcode' );