WordPressでリスト内で改行を綺麗に入れるハック

WordPressの投稿画面(HTML)では、空白行が入った場合は前後を段落と見なし、pタグが自動で挿入されるようになっています。(空白行を含まないたんなる改行の場合はbrタグに変換されます)

そのためメモ帳など各種エディタで書いた文章をそのまま貼り付ければ、文章ごとのまとまりが自動で段落となります。つまりわざわざbrタグやpタグを手打ちする必要はありません。

しかし個人的に困るのがliやddといったタグ内に長文を書きたい場合です。タグ内で空白行があると、pタグが奇妙な挿入のされ方をするためです。
分かりやすくするために、例を挙げてみたいと思います。

liタグ内の改行(空白行)のせいでpタグが自動挿入&崩れる例

まずWordPressの記事投稿画面で以下のように入力したとします。

<!-- WordPress投稿画面での入力内容 -->
<ul>
<li>
aaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbb

ccccccccccccccccccccccccc
ddddddddddddddddddddddddd
</li>
</ul>

これを実際にブラウザで見ると、以下のように表示されます。

<!-- ブラウザで表示したときのソース -->
<ul>
<li>aaaaaaaaaaaa<br />
bbbbbbbbbbbb</p> ★閉じタグだけ入っています
<p>cccccccccccc<br /> ★先頭に開始タグだけ入っています
dddddddddddd
</li>
</ul>

上記のようにddタグ内の空白行が入ったところで、pタグが奇妙な挿入をされてしまいます。

しかもこのブログの場合、pタグにmarginを設定しているためデザインもあわせて崩れてしまいます。

下二行だけ先頭にmarginが入っています
※pタグが入った下2行だけ先頭に余分なmarginが設定されています。

解決方法

この解決方法としてまず考え付くのは、WordPressのpタグ自動挿入機能そのものをとめる、またはliやddタグ内のみは手打ちでbrを入れるといった方法です。
個人的にはpタグ自動挿入そのものは止めたくないため、改行が必要な長文を入れる場合だけは後者の方法でbrタグを手打ちしていました。

しかしあまりに面倒なときがあるため色々と試行錯誤した結果、下記の方法に落ち着きました。ちょっとハック的な感じなので万人にはおすすめできませんが、同じ現象で困っている方の参考になればと思います。

開始タグの直後に改行を入れる

解決方法はとても単純です。liまたはddタグの開始直後に空白行を入れるだけです。
さきほどの例で実際に示します。

<!-- WordPress投稿画面での入力内容 -->
<ul>
<li>


aaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbb

ccccccccccccccccccccccccc
ddddddddddddddddddddddddd
</li>
</ul>

liタグであれば、上記のように開始タグ直後に空白行を二行連続で入れてください。これによりソースが以下のように変更されます。

<!-- ブラウザで表示したときのソース -->
<ul>
<li>
<p>aaaaaaaaaaaa<br />
bbbbbbbbbbbb</p>
<p>cccccccccccc<br />
dddddddddddd
</li>

上記のようにliタグ内の文章がそれぞれpタグで囲まれるようになります。これによりmarginの差違によるデザイン上の崩れが防止できます。
※なおddタグでは空白行は一行で大丈夫だったのですが、liタグでは二行必要でした。ちょっとこの原因は調査中です。

正常表示

ただし通常のliやdd内にさらにpタグが入る形になるため、pタグそのもののCSSがさらに上書き適用されます。そのあたりはCSS側で調整する必要があるので注意してください。

WordPress3.4で特定の固定ページをトップページにする方法

6月14日からWordPressの最新版3.4が使えるようになりました。テーマのカスタマイズなど気になる新機能も多く、さっそく更新している方も多いと思います。

かくいう私もさっそく3.4にしたのですが、ひとつ戸惑った箇所がありました。それが「特定の固定ページをトップページにする方法が見当たらなくなった」ということです。

3.3まではダッシュボードの「設定」→「表示設定」を開くと、どのページをトップページにするかを選択することが出来ました。ところが3.4ではこの箇所が消えています。
wordpress3.3までの設定画面

テーマのカスタマイズから設定する

この解決方法ですが、3.4からはどのページをトップページにするかはテーマのカスタマイズ機能から行うようになりました。

  1. ダッシュボードの「外観」→「テーマ」と進んで、現在使用しているテーマの「カスタマイズ」をクリックすると、テーマのカスタマイズ画面が表示されます。
    テーマのカスタマイズをクリック
  2. 左サイドバーの「固定フロントページ」をクリックし、「固定ページ」にチェックを入れます。
  3. 「フロントページ」のリストボタンからページを選ぶと、その固定ページをトップページとして設定できます。
    固定フロントページの設定

以上の手順で設定が行えます。3.4になってお困りの方の参考になれば幸いです。

WordPressサイトをサブディレクトリからサブドメインに移転する際の注意点

先日、このブログのURLをサブディレクトリ形式からサブドメイン形式に変更しました。ちょっとこの移転に際して困ったことがあったのでメモしておきます。

サブディレクトリからサブドメインに移転する手順

ここではドメイン直下の「http://******.com/blog/」ディレクトリにインストールしてあるWordPressサイトを「http://blog.******.com」というサブドメインに移転する場合の手順を解説します。

ダッシュボードでの設定

  1. WordPressにログインします。
  2. ダッシュボードの「設定」→「一般」を開きます。
  3. 「WordPress アドレス (URL)」に新しいサブドメインのURL「http://blog.******.com」を入力します。
  4. 「サイトアドレス (URL)」に新しいサブドメインのURL「http://blog.******.com」を入力します。
  5. 「変更を保存」をクリックします。

自分がトラブルにはまったのはここで、サイトアドレス(URL)はサブドメインに設定するが、WordPressアドレス(URL)は本来のサブディレクトリに設定するのだと勘違いしていました。

そうではなく「WordPress アドレス (URL)」「サイトアドレス (URL)」の両方ともに新しいサブドメインのURLを入力します。

ダッシュボードの設定

リダイレクトの設定

上記でサイトのアドレスそのものの変更は完了していますが、これまでのURLでアクセスがあった場合でも新URLに飛ぶようにリダイレクト(転送)を設定します。

リダイレクトを設定する方法は幾つかありますが、今回は.htaccessを使います。
なお「.htaccess」の詳しい使い方については「.htaccess活用法(6)」などの記事も参考にしてください。

  1. サーバー上の.htaccessファイルをダウンロードします。
  2. 下記のようにリダイレクト設定を記載します。※「******.com」のところはそれぞれの独自ドメインを入力してください。
    Redirect Permanent /blog http://blog.******.com/
  3. 保存した.htaccessをアップロードします。

それぞれの記事個別のURLのリダイレクト設定を記載しなくても、上記の設定をするだけでサブディレクトリ以下の記事はすべてそれぞれのURLに転送されます。