ブログテーマをTwenty TwelveからSTINGER2に変更した時に、修正した点をご紹介します。
いわしブログでは、ブログテーマ「STINGER2」を2013年から2017年まで利用していました。変更当初に修正したところがいくつかあるので、備忘録代わりに記事を残しておきます。
ブログテーマをSTINGER2に変更して、修正した点は以下の4つです。
- プラグイン「Redirection」を使って日本語パーマリンクを301リダイレクト
- STINGERのアイキャッチ画像設定とタグの消去
- CSS追加で画像を中央配置
- 「wp_is_mobile」関数を使ってSNSボックス表示をスマホとPCで切り替え
その後はSTINGERのバージョンアップごとに機能が追加され、上記の問題はテーマの機能だけで解決するようになりました。それからSTINGER5まで利用して、2017年にブログテーマをSimplicityに変更しています。
なお、ここで扱うSTINGERはかなりバージョンが古い(STINGER2)ので、最新バージョンのSTINGERカスタマイズや修正の参考にはなりません。
今では多機能を誇るSTINGERも、2013年時点ではこんなもんでした。それから進化を重ねて、STINGER8やSTINGER PLUS、有料テーマのSTINGER PROに発展しています。
いろいろ手直しが必要だった昔のブログテーマと比べて、何でも揃っている現在のブログテーマを使うと感慨深いものがありますね。
日本語パーマリンクを301リダイレクト
ブログテーマをSTINGERに変更したら、日本語パーマリンクが勝手に書き換わりました。
テーマを移行しただけなら、日本語のパーマリンクでそのまま表示されるのですが、記事を編集しようとすると、パーマリンクが post + 数字に書き換わってしまいます。
この問題に対処するため、日本語パーマリンクを変更して301リダイレクトを設定しました。
301リダイレクトの設定はWordPressプラグイン「Redirection」を使います。あとは日本語urlをエンコードしてから301リダイレクトの設定を行います。
この問題については、ENJILOG さんが「よくある質問 」一覧で解答を掲載されました。
いわしブログを始めたときは、日本語のパーマリンクを使っていました。いろいろ問題はありますが、SEO的には日本語表記のほうが有利だと考えています。
ただ、日本語のパーマリンクで運用していると、アドレス表記が長くて扱いにくい、アドレスが汚いという問題はいかんともしがたく、仮にSEOで多少有利であったとしても、最近はあまり使われなくなってきています。
いわしブログでも一般的な英数字表記のパーマリンクに切り替えようかと考えていたので、これを機に修正することにしました。
パーマリンク変更時に必須 301リダイレクト
STINGERでは、パーマリンクが書き換わった記事は、どうやら自動的にリダイレクトされるようです。
リダイレクト先（遷移先）をチェックするツール「リダイレクトチェッカーツール」で確認したら、ちゃんと301リダイレクトされていました。
プラグインを入れてないのに自動でリダイレクトされるので、えらく親切な設計だなぁと思いきや、今度は変更したカテゴリのアドレスがリダイレクトされないという問題が発生。
個別の記事ならＯＫでも、カテゴリはダメみたいです。.htaccess で設定してみたのですが、やっぱりダメでした。
日本語混じりのアドレスなので、エディタの文字コードの問題かなと思ったのですが、ここはおとなしく引き下がってプラグインに頼ることにしました。
最初にインストールした「Permalink Redirect」がうまく動作しなかったので、代わりに「Redirection」を使って設定すると、個別記事とカテゴリがきちんと301リダイレクトされるようになりました。
ちなみに301リダイレクトというのは、簡単に言えば古いアドレスから新しいアドレスへ転居届をだして、きちんと引き継ぎができるようにすることです。
この設定をしておかないと、古いアドレスからアクセスができなくなったり、古いアドレスの評価が消えてしまうので、検索順位が下がってしまうということが起こります。
というわけで、プラグイン「Redirection」を使って、移転前の日本語パーマリンクから移転先の英数字パーマリンクにリダイレクトさせる方法を解説します。
Redirectionプラグインの導入
まずは、Redirectionプラグインを導入します。
左メニューのプラグイン→新規追加に進んで、検索フォームから「Redirection」と入力すれば見つかります。いますぐインストールをクリックして有効化してください。
Redirectionをインストールすると、左メニューのツールに「リディレクション」という項目が追加されるので、そこをクリック。
ソースURLに移転前のURLを、ターゲットURLに移転後のURLを入力して、「新しい転送ルールを追加」をクリックします。これでリダイレクトの設定は完了です。
リダイレクト設定が済んだら、前述のツール「リダイレクトチェッカーツール」にurlを入れて、ちゃんと301リダイレクトされるかどうか確認してみてください。
あと、日本語パーマリンクを入力するときに注意点が一つあります。アドレスが日本語のままになっていると、リダイレクトが有効になりません。
/iwashiblog/category/chrome拡張機能/
URLを入力するときは、このようなエンコード文字を入れてください。
/iwashiblog/category/chrome%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/
日本語パーマリンクの問題はこれで解決しました。
実際に Redirection を使って日本語URLから301リダイレクトさせた時の作業を記事にしています。ご参考まで・・・
あと、301リダイレクトについては、こんな情報も役立つと思います。
STINGERにアイキャッチ画像を設定
続いてSTINGERのアイキャッチ画像設定とタグの消去です。
まずはサムネイルが表示されなかったのですが、これは問題というより、単にアイキャッチ画像の設定方法を知らなかっただけです。
STINGER公式ページのよくある質問に解答がありました。
投稿ページの右下にある「アイキャッチ画像を設定」をクリックして画像を選択すればＯＫです。これでサムネイルが表示されるようになります。
今までアイキャッチ画像がなかった理由ですが、前回使用していたテーマのtwentytwelveでは、アイキャッチ画像をつけると見栄えがイマイチだったからです。
タグを消す
次に、カテゴリとタグが重複してしまうという問題です。
どういうことかと言うと、記事の抜粋やフッタにはカテゴリとタグが表記されますが、どちらも同じ名前のものが多いので、ややこしいし見た目もすっきりしません。
タグのページは noindex に設定してあるのでSEO的には問題ないし、訪問者がタグから記事を辿ることもほとんどないはずなので、思い切ってタグを全て消すことにしました。
でも、Googleでブログのインデックスを調べると、タグのページが結構インデックスされています。ソースを見ても content=”noindex,follow” は記載されているのに、どうしてなんだろうか。GoogleBotは気まぐれなんでしょうけど、ちょっと気になりますね。
あとはファビコンの画像を変更したり、CreateLink のCSS修正、facebookウィジェットLikeBoxのストリームをなくして小さくしました。
とりあえず目についたところは、これでだいたい修正できました。やっぱり、アイキャッチ画像を設定してサムネイルが出るようになると、全体の見栄えがよくなりますね。
タグを消去したことによる影響は、しばらく経ってみないとわかりません。でも、また記事数も少ないし、いまのうちに対処しておくのがよいかと。
CSS追加で画像を中央配置
ブログテーマ STINGER2 は、記事編集画面で画像の中央配置が有効にならないので、CSSを修正して中央に配置されるようにしました。
これで、「投稿の編集」→「ビジュアル」タブから、画像を中寄せすることができます。
STINGERのCSS修正で参考にしたのは「knowledge tree – ナレッジツリー」さんの記事です。
さて、画像の中央配置ですが、こいつをCSSに追加しました。これで、「投稿の編集」→「ビジュアル」タブから、画像を中寄せすることができます。左右寄せは使わないので記載してません。
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}左右寄せにも対応させるには、以下を追加してください。
img.alignright {
display: block;
margin: 0 0 0 auto;
}
img.alignleft {
display: block;
margin: 0 auto 0 0;
}
img.aligncenter {
display: block;
margin: 0 auto;
}
img.float-left {
float: left;
}
img.float-right {
float: right;
}
.wp-caption {
text-align: center;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}画像の中央配置 CSSにコードを追加
では、CSSに上記のコードを追加してみましょう。
管理画面の左メニュー「外観」→「テーマ編集」をクリック。
右のメニューから「スタイルシート」をクリック。
ここに上記のコードを貼り付けてください。
項目ごとにまとまっているので、関連するところへ配置するのがよいかと。よくわからないなら、最初の方に貼り付けておけばよいでしょう。
画像の中央配置方法
ちなみに、画像の中央配置方法ですが、「投稿の編集」画面で「ビジュアル」タグ→画像を選択して「中央寄せ」を押してください。
これで画像が中央に配置されるようになりました。めでたしめでたし・・・
STINGERのSNSボックス表示をスマホとPCで切り替え
STINGERの一番下の部分にあるSNSボックス表示が大きいので、見やすさを優先させるため、PCはSNSボックスを表示、スマホの場合は消すことにします。
下の画像はSTINGER3のスマホ画面ですが、確かに大き過ぎかもしれません。STINGER3ではSNSボックスがさらに大きくなって、横に大きく広がっています。
STINGERのSNSボックス表示をスマホとPCで切り替えられるといいのですが、ソーシャルボタンのクリック率が下がるかもしれません。
Googleアナリティクスを見ると、スマホからのアクセスは結構ありますが、やっぱり消すことにしました。訪問者にとって見やすいブログを優先させます。
PCではSNSボックスを表示して、スマホの場合は表示させないことにしました。
WordPressの「wp_is_mobile」関数を使う
さて、その切り替えですが、WordPressには 「wp_is_mobile」というとっても便利な関数があるので、それを使います。
スマートフォンとPCで表示したいものを切り替える
<?php if (wp_is_mobile()): ?> /*スマートフォンで表示したいことを記載*/ <?php else: ?> /*PCで表示したいことを記載*/ <?php endif; ?>
この関数はAdsenseの表示やウィジェットの表示切り替えに使うと便利です。確かにスマホは表示スペースが限られていますから、PCとスマホで切り替えできると助かります。
スマートフォンだけ表示させる
他にも、スマートフォンだけ表示させるという使い分けができます。
<?php if (wp_is_mobile()): ?> /*スマートフォンで表示したいことを記載*/ <?php endif; ?>
こちらはスマートフォンで表示させない方法です。
<?php if (!wp_is_mobile()): ?> /*PCで表示したいことを記載*/ <?php endif; ?>
STINGERのSNSボックスに「wp_is_mobile」関数を使う
さて、実際にSTINGERのSNSボックスで「wp_is_mobile」関数を使ってみます。
PCではSNSボックスを表示、スマホの場合は表示させないので、この場合は先程の参考例の一番下、「スマートフォンでは表示させない」を使います。
いわしブログはSTINGER2なので、SNSボックスの表示切り替えはテーマフォルダ内、header.phpのコードを変更します。(STINGER3の場合はfooter.phpです)
このSNSボックス表示に関する条件分岐に、「wp_is_mobile」関数の「スマートフォンでは表示させない」条件文をかぶせる形になります。
<?php if (is_home()) { ?>
/*SNSボタン「トップページ」に関する記載*/
<?php } else { ?>
/*SNSボタン「個別記事」に関する記載*/
<?php } ?>「wp_is_mobile」関数を使うと、こんな感じになります。
<?php if (!wp_is_mobile()): ?>
<?php if (is_home()) { ?>
/*SNSボタン「トップページ」に関する記載*/
<?php } else { ?>
/*SNSボタン「個別記事」に関する記載*/
<?php } ?>
<?php endif; ?>実際のコードはもっと長いと思うので、自分のコードに合わせて適宜修正してくださいね。
下の画像はいわしブログをiPhoneで表示させたものです。SNSボックスが消えて表示面積が増えました。なかなか良い感じです。
この関数はSNSボックスの表示に限らず、何かと使い道があると思います。いろいろ工夫してみてくださいね。
