Webデザイン スキルアップ講座

WordPressでリダイレクト処理が効かない時に確認したい備忘録

2021年1月21日

WordPressを使用している、ホームページのURLのリダイレクト処理で少してこずった点がありましたので、備忘録として掲載します。

リダイレクトについての記事はネット上に詳しく書かれたものが多数ありましたが、コピペだけで対応できない注意点なども何点かありましたので、その辺でトラブルになっている方の参考になれば幸いです。

また、リダイレクトの根本的な解説も行っておりますので、私と同じファイル構造になっていなくてもきちんと理解していけば応用して処理できるようになるではと思います。

少し複雑な内容にもなりますので、うまくリダイレクト処理をできなかった方は焦って読み走らずに、しっかりと理解しながら読み進めてみてください

リダイレクトとは

リダイレクトとは、あるURLにアクセスしてきたユーザーを別のURLへ誘導する処理です。

例えば、今回私が実行したかった処理は、「https://designerbrg.com/lp/spb-graphic/」(A)のURLへアクセスした時に、「https://designerbrg.com/spbgra/」(B)へ転送させる処理になります。どのようなものかを確認したい方は、以上のURLにアクセスいただいてご確認ください。実際にリダイレクト処理をしていますので、(A)へアクセスしても(B)に転送されますので、けして(A)を閲覧する事ができません

リダイレクトの活用方法

では、どのようにリダイレクト処理を活用するのが良いでしょうか?例えば、サイトを新しくしてURLの変更をした際に、古いサイトのURLに訪れた人を新しいサイトに誘導する事ができます。これは非常に有効です。

また、今回の私のように、あちこちにばら撒いているURLをやっぱり別のサイトに誘導したいとなった時などにも利用できます。

URLをあちこちにばら撒いている場合は回収するのがほぼ不可能で、元のソースを全て打ち替えていくだけでも膨大な手間です。かといってそのまま放置してユーザーを取りこぼす訳にもいきません。すぐに「やっぱり、もーどそ」となった時にもため息しかでません。そんな場合にも、リダイレクト処理は非常に有効な対応手段となります。

リダイレクトの設定方法

リダイレクトの設定方法は色々ありますが、代表的な方法としては、HPを収納しているデイレクトリの既に存在している「.htaccess」に追記する方法になります。

「.htaccess」の場所は?

「.htaccess」?ってなられる人もいるかと思います。

「.htaccess」の詳しい場所は、以下でもまた説明致しますが、私はFTPツールを使った事しかありませんので、FTPツールのサイバーダックを使った方法で「.htaccess」の場所の解説していきます。

FTPツールの使い方がわからない方は、以下の記事を参考にしてください。

no image
無料のおすすめFTPクライアントソフトCyberduck(サイバーダック)のインストール方法から初期設定・使い方[MAC]

続きを見る

サイバーダックでWordPressの設置されたディレクトリにいくと、基本的に「.htaccess」は最上層(「wp-content」などのフォルダがある階層)にあると思います。

しかし、大半の方は「いや、そんなものはないけど?」となります。

それもそのはず、実は「.htaccess」は不可視ファイルとなっており、通常のモニタリングでは目視できない状態になっております

ですので、上部メニューバーにある「表示」から「不可視ファイルを表示」にチェックを入れましょう。

すると、先ほどの階層にきっと「.htaccess」が確認できるようになるはずです。文字は灰色で薄く表現されていますがクリックする事が可能です。

「.htaccess」の編集方法

「.htaccess」の編集は、その他ファイルの編集と同じく、サイバーダック上でファイルをダブルクリックなどして開け、修正後上書き保存すれば完了です。

リダレクト処理がうまくいかない理由を考えよう

例えば、「リダイレクト html」などでネット検索すると、コピペで処理できそうな内容のソースがゴロゴロあります。

しかし、そのソースをコピペしても、私自身のホームページにはうまくリダイレクトをかける事ができませんでした

うまくいかなかった理由は、大きく分けて2点あります。

1つは、複雑なディレクトリ構造になっている事。もう一つは、きちんと記号などの意味を理解していなかった事になります。

ディレクトリの確認

私の設置しているWordPressのディレクトリ構造は以下のようになっています。

今回私が実行したいのは、「lp」ディレクトリ階層にあるページ(https://designerbrg.com/lp/spb-graphic/)にアクセスした場合に、別のルートディレクトリにある(https://designerbrg.com/spbgra/)ジャンプさせたいというものです。

ネットのソースなどを見ていると、どうやら今回該当しそうなケースは、以下のようなソースになります。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^見せたくないページ.html$ 見せたい.html [R=301,L]
</IfModule>

普通のHTMLサイト(WordPressではない)のディレクトリ構造であれば、このコード( ^見せたくないページ.html$ 見せたい.html)を適宜変更して、不可視ファイルの「.htaccess」にこのコードを上書きすれば問題なくリダイレクト処理できるかと思います。その場合は、これ以上記事を読み進める必要もありませんし、詳しく意味を理解する必要もありません

例えば、私の場合なら「^lp/spb-graphic.html$ spbgra.html」みたいな形になりますね。しかし、これではうまくいきません

WordPressの処理にもよりますが、私のサイトの場合は「https://designerbrg.com/spbgra/」という形でURLは完結しており、「https://designerbrg.com/spbgra.html」と末尾に[.html]をつけるとページは表示されなくなります

ですので、まずソースの変更としては「^lp/spb-graphic.html$ spbgra.html」ではなく、「^lp/spb-graphic/$ spbgra/ 」にしなければなりません。

しかし、これでもうまくいきません

リダレクト処理の意味を理解しよう

ここで、今一度記載したソースの内容を確認していきたいと思います。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^見せたくないページ.html$ 見せたい.html [R=301,L]
</IfModule>

<IfModule mod_rewrite.c>

<IfModule mod_rewrite.c>(閉じタグを含む)は、サーバーに「mod_rewrite」機能があれば、ここの処理を実行してくださいという指定になるのですが、基本的にはこれはON(「mod_rewrite」機能あり)の状態だと思っていただいて結構です。ですので、そのまま記載していて問題はありません

しかし、この「<IfModule mod_rewrite.c>」のコードが書かれていなくても、私の場合は問題なくリダイレクト処理されましたので、ここの文章はあってもなくても気にしなくても良さそうです

RewriteEngine On

英語を読んでもわかるように、リライト(上書き)エンジンがONと書かれていますので、「リダイレクト処理をする」という意味になります。

RewriteRule

上記同様に、リライトルールと書かれていますので、「どういう風にリダイレクトさせるか」という解釈になります。

[重要] ^

この[ ^ ]記号が非常に重要になります

この記号は、前方のドメインの省略を意味します。

では、「前方」とはどの位置までを指すのかというと、現在操作している「.htaccess」ファイルが設置されている階層までの省略になります。

例えば、私サイトでは以下のように考えます。

確認1

私は、今回「https://designerbrg.com/lp/spb-graphic/」にアクセスした時に、別ページへリダイレクト処理をしたいと考えております。以下は、URL構造の確認です。

「designerbrg.com」はメインのドメインになります。

「lp」はサブディレクトリになり、ここにWordPressがインストールされています。ちなみに「blog」「spbgraphic」共にサブディレクトリになります。

サブディレクトリの意味がわからない場合は、以下の記事をご確認ください。

no image
サブディレクトリにインストールしたワードプレスを「/」なしの正式ドメインのみのURLでアクセスさせる方法

続きを見る

「spb-graphic」はWordPressの固定ページのパーマリンクになります。

no image
URL(パーマリンク)を英語で管理する理由【WordPress】

続きを見る

ですので、「https://designerbrg.com/lp/spb-graphic/」にアクセスした時に、別ページへリダイレクト処理をしたいのであれば、「lp」直下のフォルダ(「wp-content」などのフォルダがある階層)にある「.htaccess」に指示する必要があると考える事ができます。(ここ重要です

確認2

上書きの対象となる「.htaccess」を確認できれば、今一度考えてみます。

前述していた例の「^lp/spb-graphic/$ spbgra/」という記述を、「lp」直下の「.htaccess」に指示していると、省略記号の「^」は「https://designerbrg.com/lp/」までになりますので、「^lp/spb-graphic/$ spbgra/」という記述は、「https://designerbrg.com/lp/lp/spb-graphic/$ spbgra/」という事で、「lp」が二重になっている事がわかります。

ですので、ここでの正解は「^lp/spb-graphic/$ spbgra/」ではなく、「^spb-graphic/$ spbgra/」になります。

確認3

さらに、後半の「spbgra/」の部分に関してですが、「spbgra/」の前方のURLが「^」(https://designerbrg.com/lp/)部分と同じになるのであれば省略(何もかかない)しても良いとの事になっています。

しかし、今回の場合は、リダイレクト先のURLは「https://designerbrg.com/spbgra/」であり、「lp」ディレクトリを経由しておりませんので、この省略を利用する事ができません

ですので、今回の場合であれば、「^spb-graphic/$ spbgra/」ではなく、「^spb-graphic/$ https://designerbrg.com/spbgra/」と記載しなければならない訳です。

$

「$」は「ここまで」というURLの終わりの印になります。

[R=301,L]

[R=301,L]はリダイレクトの方法を指定しています。

リダイレクトは、301や、302などの「HTTPステータスコード」というものが割り当てられており、それぞれ用途が違います。

301

301のステータスコードは、恒久的という意味合い、すなわち「ずっとリダイレクトをさせ続けたい」という場合に用いるコードです。

302

対して302のステータスコードは、例えばサイトメンテナンスの間だけなど一時的なリダイレクト処理をしたい時に用いられます。

ですので、今回の場合は、「301」のステータスコードを適用させるようにします。

R=

「R=」に関しては、そのまま「リダイレクト」の意味・略で、「L」はラストの略で、「ここまでの処理が問題なく実行されていれば、ここで終わります」という指示になります。ここら辺は基本的にコピペで問題なさそうです。

[重要] WordPressでの注意点

上記のように「.htaccess」を上書きすればリダイレクトがかかるはずなのですが、意外と落とし穴になるところで、WordPressユーザーに必ず気をつけて頂かないといけない注意点があります。

それは、「.htaccess」内のリダイレクト指示を追記する場所になります。

使っているテーマや、プラグインにもよりますが、基本的に「.htaccess」を開けた時点では、何かしらの以下のような英語のプログラミングが書かれていると思います。書かれていなければ書く場所は気にしなくて良いです。

# BEGIN WordPress
# BEGIN WordPress から END WordPress までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /lp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /lp/index.php [L]
</IfModule>

# END WordPress

もちろん、リダイレクトの上書き設定をする際にこれらを消しては絶対にいけません。覚えておきましょう。

そして、追記する場所なのですが、普通に考えると、現在書かれているプログラムの最終行(「# END WordPress」)から何行か適当に改行した場所に追記するのが一般的な発想になるのではないかと思います。リダイレクトではない処理を「.htaccess」に上書きする際は、そのようにどこに書いてもOKというのが基本的な解釈になります。

しかし!リダイレクトの処理に関しては、「# BEGIN WordPress」より前に必ず記載しないといけません「# BEGIN WordPress」より後ろに書くとリダイレクト処理されませんので、その点注意しましょう。

まとめ

以上の事を最終的にまとめると、今回の私のリダイレクト処理は以下のようになっています。

# リダイレクト
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^spb-graphic/$ https://designerbrg.com/spbgra/ [R=301,L]
</IfModule>

# BEGIN WordPress
# BEGIN WordPress から END WordPress までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /lp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /lp/index.php [L]
</IfModule>

# END WordPress

私のように階層が複雑になっているリダイレクト処理は、ネットにある豊富なソースから何も理解せずにコピペだけでは解決する事ができませんでした。ですので、うまくリダイレクト処理が実行できない場合は、しっかりと自分が何を書いているのかをしっかり噛み砕いて理解するようにしましょう

書いている事は、意外と簡単な事なのできっと理解できると思います。

意味が理解できると、私と同じ階層構造でなくても応用がきくようになりますので、きっと問題も解決できるようになると思いますよ。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン, スキルアップ講座

Copyright© デザイナーブリッジ , 2021 All Rights Reserved.