タイトルタグがダブる

僕自身、Wordpressをさわり始めた頃によくあったのですが、
header.phpに直接titleタグを書いて、自由に編集したのに、
どうもブラウザで見るとタイトルが変わっていない。

ファイルもちゃんと上書き保存したし、FTPアップもちゃんとできている。
何故だ何故だとなって、ソースを見てみると、なんとtitleタグが２つも表示されている。

自分で頑張ってheader.phpに書いたtitleの後に、別のtitleタグがあるので
そりゃいくらやっても変わらない。

ということがありました。

結論から言いますと、これはWordPressに設置されている「wp_head」が自動で出力しているものでした。
それが自分で追記したheader.phpのtitleタグとダブっていたのです。

デフォルトで表示されるtitleタグは、管理画面で指定した「サイト名」や「記事タイトル」を自動で反映してくれるので、便利なのですが、
全ページで固定にしたいときなどは、自分でtitleタグを固定で書かないといけなかったりします。

そんなtitleタグを自分で書きたいのに、自動表示でダブってしまう時の解決方法をご紹介します。

「wp_head」は必須

ならば勝手にtitleタグをはき出す「wp_head」ごと消してしまえばいいのか？ということになりますが、
wp_headが無いとプラグインなどが動かなくなったりすることがあるので、これはNGです。
これはfooter.phpなどにあらかじめ書いてある「wp_footer」についても同様です。

「wp_head」からtitleタグを削除する手順

となるとやはり「wp_head」からtitleタグだけを削除しなければなりません。
そのためにはfunctions.phpを編集します。

まず、このタグ自体は下記のように「wp-includes/default-filters.php」というファイルで、表示設定がされています。

// Actions
add_action( ‘wp_head’, ‘_wp_render_title_tag’, 1 );

でもこれはWordpressをバージョンアップすると上書きされてしまうので、ここは編集しません。

functions.phpに、上記を削除する命令を書きます。
functions.phpに下記を追記

//wp_headのtitleタグを削除
remove_action(‘wp_head’, ‘_wp_render_title_tag’, 1);

これで「wp_head」からtitleタグが削除されました。
自由にtitleタグを書いていただければと思います。

当然ですが、「wp_head」が行っていた、トップ、カテゴリページ、記事ページなどでの自動振り分け表示も無くなるので、
振り分け等が必要な場合は、自分で書く必要があります。

WordPressでfacebookやtwitterなどのソーシャルボタン（シェアボタンなど）を自動表示してくれるプラグインはたくさんありますし、プラグインは使わない！と各ソーシャルメディアのコードを手動で設置している強者もいます。

自分はずっと「WP Social Bookmarking Light」を使っていたのですが、最近「AddToAny Share Buttons」に乗り換えました。
理由はアイコンがフラットデザインで正方形で表示され、サイトにもなじみやすく、使いやすいからです。

今回はそんな「AddToAny Share Buttons」のご紹介です。

「AddToAny Share Buttons」のインストール

wordpressのプラグイン画面からインストールできますので、インストールして有効化します。

wordpress.orgからダウンロードするにはこちら
https://ja.wordpress.org/plugins/add-to-any/

「設定」内に「AddToAny」という項目が登場しますので、ここから設定画面を開きます。

各種設定

設定画面ではアイコンのサイズやデザイン、設置する場所などを設定できます。
お好みの設定ができたら、「変更を保存」を押します。

手動で設置場所を決める場合

基本的には設定画面の「ブックマークボタンの場所」で表示場所を決められますが、
手動でテンプレートの任意の場所に設置することもできます。

その場合は「ブックマークボタンの場所」のチェックを全てはずし、
設置したい場所に以下のコードを設置します。

これで好きな場所に設置することも可能です。

なお「ブックマークボタンの場所」のチェックを外さないと、ダブって表示されてしまうので注意が必要です。

ブログなどを見ていると、よく記事の最初の方に各小見出しへの目次が設置されているのを見たことがあるかと思います。
これ、読む前に記事の全体構成もわかるし、必要な情報に直接飛ぶこともできるし、とても便利ですよね。

とはいえ、記事投稿ごとに毎回ページ内リンクのhtmlを書いて･･･なんてとてもじゃないけどやってられません。

そこで役に立つのがこのプラグイン「Table of Contents Plus」です。

「Table of Contents Plus」について

インストールして有効化すれば、記事の構成に合わせて、自動的に目次（ページ内リンク付き）を作成してくれるプラグインです。
投稿だけでなく、固定ページやカスタム投稿タイプにも対応していますし、ちゃんと見出しのhtmlをh1タグから順に書いておけば、階層構造も表示してくれます。

ただし、htからh6タグを自動で判別して階層表示するので、見出しの階層はきちんと書いておくことが必要です。

h1が第一階層、h2が第二階層、h3が第三階層･･･
というように、見出しの大きさによって目次の表示も整えられます。

基本設定など

基本的には管理画面のプラグイン「新規追加」から「「Table of Contents Plus」をインストールして有効化すればＯＫです。

WordPress.orgからもダウンロードできます。
https://wordpress.org/plugins/table-of-contents-plus/

基本設定で、記事のどのあたりに表示するかや、階層表示をするか、さらに目次エリアのデザインもいくつかから選ぶことができます。

必要な設定を選んで、「更新」すればＯＫ。
なにも設定せずにデフォルトのままでも、問題ない見栄えです。

目次が付くことで、スマホユーザーのユーザビリティもグンと上がるのではないでしょうか。

関連記事といえばsimilar postsやYARPPなどが有名ですが、
他のプラグインとのバッティングや動作の負荷になって表示が遅くなることもあるため、そもそもあまりプラグインをガンガン入れるのはおすすめできません。

そこで、プラグインなしでも比較的シンプルに実装できる「関連記事」の設置方法をご紹介します。
といってもコピペでＯＫなやつです。

コピペで動く関連記事表示用コード

下記をテンプレートファイルsingle.phpの、表示したい位置に設置します。
dlタグで挾まれた部分が実際の表示箇所なので、必要に応じてCSSなどで整えます。

<?php
$categories = get_the_category($post->ID);
$category_ID = array();
 
foreach($categories as $category){
	array_push($category_ID,$category->cat_ID);
}
 
$posts_number = 5; // 表示したい件数を指定
 
$args = array(
	'post__not_in'=>array($post->ID), // 現在のページの投稿を除外
	'category__in'=>$category_ID, // 現在の投稿のカテゴリーの関連記事を取得
	'orderby'=>'rand', // ランダムに並べる
	'posts_per_page'=>$posts_number, // 表示する件数の指定
);
$wp_query = new WP_Query($args);
 
if($wp_query->have_posts()){
	while($wp_query->have_posts()):$wp_query->the_post();
	?>
		<dl>
			<dt><?php the_post_thumbnail('thumbnail'); ?></dt>
			<dd><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3></dd>
		</dl>
	<?php
	endwhile;
}else{
?>
	// 関連記事がないときの内容を書きます
	<?php } ?>

ざっくりですが、内容的には
WP_Queryを使って、現在の記事のカテゴリ内から記事をランダムに表示する、
という仕組みです。

ちなみにcategory__inの箇所で現在のカテゴリを指定していますが、ここで別のカテゴリを指定すれば、当然そのカテゴリの記事が表示されます。

wordpressを使う人なら誰もが一度は聞いたことがあるであろうプラグイン「Contact Form 7」。
管理画面から簡単に送信フォームが設置できてしまう便利なプラグインです。

基本的には各項目も、設定画面から設置できるように作られていますが、
なぜか、メールアドレス確認（再入力）用の項目については、デフォルトでは書かれていません。

とはいえ、せっかくのお問い合わせ時がメールアドレス入力ミスで、連絡が取れなかったとなると痛すぎますよね。
今回はそんな「Contact Form 7」でのメールアドレス確認欄の設置の仕方をご紹介します。

functions.phpにコードを設置

まずはテーマディレクトリ内にある、functions.phpの最後に、以下のコードを追記します。
これで、メールアドレス確認の機能が追加されます。

add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );
function wpcf7_text_validation_filter_extend( $result, $tag ) {
global $my_email_confirm;
$tag = new WPCF7_Shortcode( $tag );
$name = $tag->name;
$value = isset( $_POST[$name] )
? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
: '';
if ($name == "your-email"){
$my_email_confirm=$value;
}
if ($name == "your-email_confirm" && $my_email_confirm != $value){
$result->invalidate( $tag,"確認用のメールアドレスが一致していません");
}

return $result;
}

Contact Form 7に確認用の項目を設置

続いて、Contact Form 7の「フォーム」編集画面で、以下のとおり、メールアドレス確認用の項目を設置します。

[email* your-email_confirm]

これでＯＫです。

*は必須入力の印なので、入力がなければ「入力がありません」とエラーが出ますし、
入力があっても、メールアドレス欄と内容が違えば、エラーになります。

既存テーマを使用する時にとても便利なのが「ウィジェット」。
あらかじめカテゴリ一覧や検索など、色々な機能が集約されており、
多くのテーマで、「外観」から表示・非表示を切り替えることができます。

その中でもほとんどの人が使うであろう「カテゴリー」（カテゴリアーのリストやドロップダウン）ですが、
意外にも表示したくないカテゴリのみ除外する機能は、デフォルトではありません。

今回はそんな、サイドバーウィジェットのカテゴリ一覧から、特定のカテゴリを除外する方法をご紹介します。

テーマディレクトリのfunctions.phpに追記するだけでＯＫ

方法と言っても、テーマディレクトリにあるfunctions.phpに以下のコードを追記するだけ。
一瞬でできてしまいます。

add_filter('widget_categories_args', 'my_theme_catexcept',10);
function my_theme_catexcept($cat_args){
    $exclude_id = '23,33';     // 除外するカテゴリID
    $cat_args['exclude'] = $exclude_id;     // 除外
    return $cat_args;
}

$exclude_idのところの数字で、除外したいIDを指定します。
除外したいカテゴリが複数ある場合は、「,」カンマで区切ってください。
（上記ではIDが23,33となっています。）

これで、指定したカテゴリは除外されて、一覧には表示されません。

もし、一覧から消えないよー、という場合は、カンマが全角だったり、
コピペの時に一文字消えちゃってたりすることがあるので、再度チェックしてみてください。

カテゴリIDの調べ方

もしカテゴリIDの調べ方が分からない方は、こちらで調べてみてください。

1. 「投稿」＞「カテゴリ」からカテゴリ一覧を表示
2. 該当カテゴリにマウスを合わせて、URLを確認

WordPressで記事を投稿していて、気づいたら頑張って入れた改行が消えてしまったことはありませんか？
せっかく読みやすいように改行を気にして文章を書いたのに、プレビューしてみると文章が全部つながっている･･･

これではせっかくの文章が読みづらい！

ということで、今回はそんな問題を解決するプラグインをご紹介します。

WordPressの自動整形機能

そもそもなぜ改行が無くなるかというと、Wordpressの基本機能として「自動整形機能」があるためです。
これがあることで、文章の最後の無駄なスペースや、連続する改行を自動的に削除することで、コード的に正しいHTMLに整えようとします。

ただ、これがあるために、
文脈上あえて行間をたくさん空けたいときなどに困ります。

HTML上は正しくても、強調したい一文を改行で目立たせる、みたいなことができなくなってしまうのです。

これは逆に不便だ、となるのですが、

これを簡単に解決してくれるプラグインがあります。

それが「TinyMCE Advanced」です。

プラグイン「TinyMCE Advanced」をインストール

「TinyMCE Advanced」はビジュアルエディタを拡張してくれるプラグインです。

改行以外にもボタンやメニューを整理したりもしてくれるスグレモノなのですが、今回は改行が消える問題の解決に集中します。

まずは、Wordpressの管理画面から「TinyMCE Advanced」をインストールします。

インストールしたら忘れずに「有効化」しましょう。

一カ所チェックを入れるだけでＯＫ

プラグインを有効化すると「設定」メニューの中に「TinyMCE Advanced」が登場するので、ここで色々な設定を行います。

設定と言っても、「段落タグの保持」にチェックをひとつつけるだけ。
これで改行が勝手に消える問題は解決です。

チェックをつけたら忘れずに「変更を保存」ボタンを押せば完了。

ちゃんと改行が空けた分だけ空いているかと思います。

他にもエディタをカスタマイズする色々な設定ができますので、興味があれば触ってみてください。

以上、Wordpressで改行が消える問題の解決策でした。

これで、読みやすいブログをガシガシ更新しましょう！

「Contact Form 7」は管理画面からフォームがかんたんに作れてしまうプラグインです。
ただ、慣れてくると見栄えを整えたくなることがあるかもしれません。

基本的にはフォームの設定画面でHTMLを書くことができますが、
テキストフィールドなどの各項目にクラスをつけて、見栄えなどを個別に制御する方法をご紹介します。

クラス名の書き方

まず「Contact Form 7」の各フォームの設定画面を開きます。
ここで必要な項目を準備します。

例えば名前を入力してもらう必須項目だと、以下のとおりです。

[text* your-name]

これにクラス名（例：small）をつけたい場合は、以下のように記述します。

[text* your-name class:small]

class: をつけてクラス名を記載するだけでＯＫです。

クラス名が複数ある場合

ちなみに複数のクラス名（例：small、input30）をつけたい場合は、以下のように書きます。

[text* your-name class:small class:input30]

他にもidやsizeなども、コロン（:）で区切ることで設定が可能です。

より詳しい情報は「Contact Form 7」の公式サイトで確認することができます。
https://contactform7.com/ja/