ひかげStyle ロゴ

月別: 2018年2月 アーカイプページ1

月別: 2018年2月 アーカイブ一覧1

投稿:2件

WordPress searchform カスタマイズ

2018年2月26日 WordPress 0

WordPressの自作テーマでCSSフレームワークを利用した時にsearchform.phpのカスタマイズが必要になってしまった、@ひかげです。

WordPress 4.9.4 searchform.php カスタマイズの例になります。

「searchform.php」の無いテーマでは、WordPressの標準仕様による検索フォームが使われます。

基本的なsearchform.php HTML5 フォームの作り方

  • searchform.phpのファイル作成
  • 検索用フォームをテーマに設置(インクールドタグ、ウィジェット)

WordPress searchform.php デフォルトの HTML5 フォーム

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">

<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>

<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />

</form>

詳しくは、「関数リファレンス/get search form」をご覧ください。

テーマとインクールドタグ

WordPressのテーマにインクールドタグを使って「searchform.php」を読み込む場合

<?php get_search_form(); ?>

ウィジェットから検索フォームの設置

テーマのウィジェットからサイドバーなどへ「検索」をドラッグや追加をして利用する場合、インクールドタグは不要です。

WordPress searchform カスタマイズ1

WordPress searchform カスタマイズ2

シンプルにカスタマイズした searchform.php

<form role="search" method="get" id="search-form" class="search-form" action="<?php echo home_url( '/' ); ?>">

<div class="searchform_inner">

<input type="text" value="" name="s" id="s" class="searchform_input" placeholder="<?php echo __( 'Search' ) ?>">

<button id="searchsubmit" class="btn-searchsubmit" type="submit" tabindex="1" accesskey="q"><?php echo __( 'Search' ) ?></button>

</div><!-- /.searchform_inner -->

</form>

searchform.php カスタマイズ(Bootstrap v4.0.0)

Bootstrap v4.0.0を利用したWordPressでウィジェットを使ったsearchform.phpのカスタマイズ例

searchform.phpとstyle.cssの編集・カスタマイズが必須です。

<form role="search" method="get" id="search-form" class="form-inline search-form" action="<?php echo home_url( '/' ); ?>">

<div class="searchform_inner">

<input type="text" value="" name="s" id="s" class="form-control mr-0 searchform_input" placeholder="<?php echo __( 'Search' ) ?>">

<button id="searchsubmit" class="btn btn-primary my-2 btn-searchform" type="submit" tabindex="1" accesskey="q"><?php echo __( 'Search' ) ?></button>

</div><!-- /.searchform_inner -->

</form>

style.css カスタマイズ(Bootstrap v4.0.0)

.widget_search {
    margin-bottom:1em;
}

.widget_search label.screen-reader-text {
    display:none;
}

input#s {
    width:65%;
}

検索フォームカスタマイズの完成例(Bootstrap v4.0.0)

iPad Air2で見たときに、検索フォームのボタンを横並びにするため、入力欄(input#s)の横幅を調整(width:65%)しました。

WordPress searchform カスタマイズ3

おわりに

CSSフレームワークや自作テーマで「searchform.php」をオリジナルで作成するときに、カスタマイズの参考になれば幸いです。

検索結果を表示する「search.php」も作成しておくと便利かもしれませんね。

WordPress 4.9.2 コメントテンプレートのカスタマイズ

2018年2月6日 WordPress 0

WordPressでcomments.phpのファイルを作るときに迷ってしまう、@ひかげです。

WordPressでcomments.phpをいろいろカスタマイズしようとすると苦労することが多いと思います。

「/wp-includes/theme-compat/comments.php」から、デフォルトのコメントテンプレートをコピーしてカスタマイズすると便利なことに気づきました。

シンプルにカスタマイズした comments.php

自作テーマで「Theme Check」のプラグインを使用した際に、エラーの無い「シンプルなcomments.php」にカスタマイズしています。

<?php if ( post_password_required() ) { ?>

<p class="nocomments"><?php _e('This post is password protected. Enter the password to view comments.'); ?></p>

<?php return; } ?>


<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>

	<h3 id="comments">
		<?php
			if ( 1 == get_comments_number() ) {
				/* translators: %s: post title */
				printf( __( 'One response to %s' ),  '&#8220;' . get_the_title() . '&#8221;' );
			} else {
				/* translators: 1: number of comments, 2: post title */
				printf( _n( '%1$s response to %2$s', '%1$s responses to %2$s', get_comments_number() ),
					number_format_i18n( get_comments_number() ),  '&#8220;' . get_the_title() . '&#8221;' );
			}
		?>
	</h3>


	<ol class="commentlist">
	<?php wp_list_comments();?>
	</ol>



<?php paginate_comments_links(); ?>



<?php endif; ?>



	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments"><?php _e('Comments are closed.'); ?></p>

	<?php endif; ?>



<?php comment_form(); ?>

comments.phpで使用するコメントページ送り用のコード

  • paginate_comments_links()
  • the_comments_navigation
  • the_comments_pagination
  • next_comments_link()
  • previous_comments_link()

コメントページ送り用のコード(コピペ用)

WordPress 4.9.2のカスタマイズ向けに4種類あります。

ディスカッションの設定で、表示がそれぞれ違ってくるため、CSSの追記や修正が必要かもしれません。

使いやすいコードをコピペでどうぞ。

<?php paginate_comments_links(); ?>
<?php the_comments_navigation(); ?>
<?php the_comments_pagination(); ?>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>

おわりに

自作テーマで「comments.php」をオリジナルで作成するときに、自動で付与されるCSS向けのidやclassも多くあるので、カスタマイズの参考になれば幸いです。

@ひかげ

WordPressカスタマイズ向け自作テーマ kunai

ひかげのWP自作テーマ1

ひかげStyle