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(); ?>
ウィジェットから検索フォームの設置
テーマのウィジェットからサイドバーなどへ「検索」をドラッグや追加をして利用する場合、インクールドタグは不要です。
シンプルにカスタマイズした 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%）しました。
おわりに
CSSフレームワークや自作テーマで「searchform.php」をオリジナルで作成するときに、カスタマイズの参考になれば幸いです。
検索結果を表示する「search.php」も作成しておくと便利かもしれませんね。
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' ), '“' . get_the_title() . '”' );
} 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() ), '“' . get_the_title() . '”' );
}
?>
</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も多くあるので、カスタマイズの参考になれば幸いです。
2017年6月9日 WordPress 0
ログインすると、WordPress 4.8の更新が表示されていたので、WordPress 4.8へアップデートをした、@ひかげです。
WordPress 4.8 更新後の画像
見慣れた「WordPress 4.8 へようこそ」です。
無事に更新できたようです。
おわりに
WordPress 4.8 へアップグレードしましたが、ワンクリックで更新できるので、便利でカンタンでした。
2017年2月18日 WordPress 0
ログインすると、WordPress 4.7.2の更新が表示されていたので、WordPress 4.7.2へアップデートをした、@ひかげです。
WordPress 4.7.2 更新後の画像
見慣れた「WordPress 4.7.2 へようこそ」です。
無事に更新できたようです。
おわりに
WordPress 4.7.2 へアップグレードしましたが、ワンクリックで更新できるので、便利でカンタンでした。
2016年12月20日 WordPress 0
ログインすると、WordPress 4.7の更新が表示されていたので、WordPress 4.7へアップデートをした、@ひかげです。
WordPress 4.7 更新後の画像
見慣れた「WordPress 4.7 へようこそ」です。
無事に更新できたようです。
おわりに
WordPress 4.7 へアップグレードしましたが、ワンクリックで更新できるので、便利でカンタンでした。
2016年9月15日 WordPress 0
ログインすると、WordPress 4.6.1の更新が表示されていたので、WordPress 4.6.1へアップデートをした、@ひかげです。
WordPress 4.6.1 更新後の画像
見慣れた「WordPress 4.6.1 へようこそ」です。
無事に更新できたようです。
おわりに
WordPress 4.6.1 へアップグレードしましたが、ワンクリックで更新できるので、便利でカンタンでした。
2016年8月17日 WordPress 0
ログインすると、WordPress 4.6の更新が表示されていたので、WordPress 4.6へアップデートをした、@ひかげです。
WordPress 4.6 更新後の画像
見慣れた「WordPress 4.6 へようこそ」です。
無事に更新できたようです。
おわりに
WordPress 4.5.3 から WordPress 4.6 へアップグレードしましたが、ワンクリックで更新できるので、便利でカンタンでした。
2016年8月9日 WordPress 0
かたくなにWordPress ME 2.2.3 を長く使っていたのですが、時代の流れによってPHPエラーが多発し、エラーコードが表示されてしまうなどの事態に追い込まれ、試行錯誤と長い戦いの末、しぶしぶ最新版のWordPressを導入した、@ひかげです。
最新版のワードプレスでは、記事の修正などを行うと「リビジョン機能」が発動し、データベースの容量に影響が発生するので、「リビジョンを保存しない」ためのプラグインを設置しました。
プラグイン Revision Controlをインストール
まずは「Revision Control」というプラグインをインストールします。
ログイン後にサイドバーのメニューで、「プラグイン」「新規追加」から検索して、インストール後に有効化します。
Revision Controlの設定
つぎに「設定」から「Revisions」をクリックして、「Revision Controlの設定画面を表示」させる。
リビジョンを保存しない（Do not store Revisions）」に設定して変更を保存します。
おわりに
無事に設定が終わりました。
2012年8月5日 WordPress 0
書籍「WordPress デザインワークブック 3.4対応」を購入した、@ひかげです。
発売日が「2012年7月20日」ということで、最近の新しい書籍になります。
ページボリュームは、「296ページ」です。
おもにWordPress 3.4系サイト構築向けの一冊になります。
執筆は共著ですが、hiromasa.another :o) でおなじみの、ひろまさサンです。
ひろまさサンが執筆されている書籍は、最強のブログサイトシリーズから4冊目ですが、すべて購入しているので、コンプリートになります。
ここ数年のひかげは、サイト構築よりもアプリからの投稿をテンプレ化、運用重視に偏っているので、ワードプレス界の情報収集をするために購入した経緯になります。
構築される方と投稿者は、基本的に別々の作業や考え方になりますが、新しい発見につながる1冊ではないでしょうか。
2012年5月27日 WordPress 0
書籍「WordPress デザインブック 3.x対応」を購入していた、@ひかげです。
本棚を整理していて、読んでいなかったことを思い出しました。
発売日が「2011年9月」ということで、1年以内の書籍になります。
いまから読んでみます。
