絶対に失敗しないWindows Live Writerの「テーマの更新」方法を探る!

58695765_9f34bad10a_b

Windows Live Writerには「テーマの更新」という機能があります。

Windows Live Writerのテーマ機能

「テーマの更新」機能は、Windows Live Writer(以下WLW)のエディター上にWordpressで使用しているテーマのスタイルを適用することにより、テーマの見た目通りにWYSIWYGでエディター上でも編集できる機能です。(WYSIWYGとは、見たままが得られるという意味)

ただ、このWLWのテーマ更新機能は、正常に動作しないことも多いです。僕は、これまで「テーマの更新」は、まともに成功したことがないので、使用していませんでした。というか、まともに機能しないものだと思っていました。

けど先日、テーマフォーラムに「Windows Live Writerにテーマを取り込みたい」という要望をいただきました。そのとき方法をちょっと調べてみたところ、「テーマでの設定とWLWの設定側で何とかできるのかも?」ということがわかりました。

それで、昨日いろいろ調べていたら、主な原因と解決方法がわかりました。

photo by Niall Kennedy

スポンサーリンク
レクタングル(大)広告

テーマの更新の失敗

テーマの更新の失敗には以下の2種類があります。

  1. そもそもテーマの更新作業で失敗する(スタイルをダウンロードできない)
  2. テーマの更新がうまくいっても、思い通りのスタイルにならない

以下では、それぞれの失敗原因について簡単に説明します。

テーマの更新作業で失敗して取得できない

テーマの更新がうまくいかない理由の一つとして、テーマ内にWLWのテーマ更新に必要なコードが含まれていないというのがあります。

WLWでは、home.phpやindex.phpのテンプレート内にthe_title()やthe_content()を探してタイトル部分とコンテンツ部分のある場所を判断します。(get_the_title()やget_the_content()でも多分OK)

なので、テンプレート内にそれらのコードが含まれていないと「テーマの更新」でスタイルの取得に失敗します。

WLWのテーマスタイルを取得する手順を簡単に説明すると以下のようになっていると思います。(あくまで予想)

  1. home.phpテンプレート内にthe_title()やthe_content()があるか探す
  2. 無い場合は、index.phpテンプレート内を探す
  3. 無い場合はテーマスタイルの取得に失敗する

こんなメカニズムで失敗しているものと思われます。解決方法は後述します。

参考 Windows Live Writer テーマの取得について

思い通りのスタイルが適用されない

「テーマの更新」作業がたとえうまくいっても、思い通りのスタイルが適用されないこともあります。

例えば、投稿ページのスタイルを適用したいのに、インデックスページのスタイルが適用されてしまうとか。

これは、やはり先程のWLWの動作と関連しています。

WLWは、テーマを更新するときに、home.phpとindex.phpしか読み込みません。

なので、どうしてもトップページのインデックス部分のスタイルが読み込まれてしまうのです。

昔のブログならインデックス部分では以下のようなスタイルが一般的でした。

テーマで言えば、Twenty TenとかTwenty Elevenとか。

昔のブログインテックス

WLWは、home.phpとindex.phpから、the_title()やthe_content()を探し出して取り込むので、こういった場合はうまくいきます。

しかし、最近の主流は、インデックスページに投稿本文は表示させず、ブログカード形式というのが多いです。

Simplicityなども、そのような形式をとっています。

現在主流のプログインデックス

このような形式のインデックスページ(home.phpとindex.php)から、テーマのスタイルを取得してしまうので、投稿ページのスタイルにならず、思ったような表示ができなくなっています。

WLWのテーマ更新を成功させるには?

簡単に手順を説明するとこんな感じになります。

  1. 「WLW更新用テーマ」を作成する
  2. 「WLW更新用テーマ」をZIP圧縮してアップロード後インストール
  3. WordPressの設定の確認
  4. WLWでテーマの更新
  5. それでもスタイルが崩れた場合は、WLWのスタイルシートを編集

「WLW更新用テーマ」の作成

WLWの「テーマの更新」がうまくいかない場合は、「WLW更新用テーマ」を作成します。

「WLW更新用テーマ」の作成といっても簡単で、index.phpをちょこちょこっとコピペで編集するだけです。

※これは、現在使用しているテーマをそのまま編集せず、一旦テーマフォルダを複製コピーして「WLW更新用テーマ」として編集してください。

WLWのテーマ更新を成功させるには、使用しているテーマのindex.phpの中身を、single.phpの中身をコピペして入れ替えてしまうという方法があります。

そのテーマの中でthe_title()やthe_content()がちゃんで呼び出されているかをチェックします。(get_the_title()やget_the_content()でも多分OK。index.php内のテンプレート呼び出し関数(get_template_part()など)の呼び出したテンプレート内に関数が書かれていても多分OK。)

home.phpがある場合は、更新用テーマには不要なので削除してください。

「WLW更新用テーマ」をWordpressにインストール

その編集後の更新用テーマをZIPで圧縮して使用しているサーバーにアップロードします。

「外観→テーマ」から「テーマのブロード」をクリック。

テーマのアップロード

作成した更新用テーマを選択して「いますぐインストール」を押してください。

今すぐインストール

こうすることで、index.phpがsingle.phpと同様のデザインになり、そのスタイルがインデックスページに適用されます。それをWLWで読み込みます。

インストールが終わったらテーマを有効化します。

テーマを有効化

有効化。

テーマを有効化する

WordPressの設定の確認

ここで、Wordpress側の設定を確認します。

WordPress側で、固定ページをフロントページにしている場合は、WLWの「テーマの更新」がうまくいかないので設定を一旦戻します。

フロントページの解除は、「設定→表示設定」の「フロントページの表示」項目の「最新の投稿」にチェックを入れて「変更を保存」ボタンを押します。

フロントページの表示設定

WLWでテーマの更新

あとはWLW側で「テーマの更新」を行います。

WLWでテーマの更新を行うには、「ブログアカウント」タブから「テーマの更新」ボタンをクリックしてください。

ブログアカウントからテーマの更新

これでおそらく、大抵の場合はうまくいくと思います。

WLWのスタイル編集

前項目までの設定でおおよそうまくいくと思うのですが、それでもうまくいかなかったときは、WLWのスタイルシートを自前で書き換えて無理やり思い通りに表示させるという方法もあります。

その設定ファイルがある場所は、以下の場所になります。(Windows7、8で確認)

C:\Users\ログインユーザー名\AppData\Roaming\Windows Live Writer\blogtemplates\

blogtemplatesフォルダ内を見てみて、フォルダが2つ以上ある場合は、更新日時が新しい方を開きます。(さっきテーマの更新をしたので更新日時が新しい)

blogtemplatesフォルダ

設定フォルダを開くと、以下のようなファイル構成になっています。

設定のファイル構成

この中で、スタイル編集に必要なのは、index.htmのみです。

そのindex.htmをテキストファイルで開いて、以下の部分にスタイルを記入しWLWを再起動すると、そのスタイルがWLWエディターに反映されます。

記入するスタイルは、テーマフォルダ内のstyle.cssから必要な部分をコピーするのが手っ取り早いと思います。

ちなみに、Simplicityのindex.htm内の投稿本文部分は以下のようになっています。

このHTMLに合うようなスタイルシートを、テーマ内のstyle.cssから見つけてきて以下のように貼り付ければ、そのスタイルが適用されます。

index.htmにスタイルを記入していけば、結構思い通りにスタイルが適応できるので、どうしてもうまくいかないときには有効だと思います。

参考 Windows Live Writerでのテーマ取得失敗対処とCSSカスタムのTIPS

参考 Windows Live Writerでテーマが崩れる場合の対処法.

設定後の動作確認

今回当サイトの場合、設定後Windows Live Writerのエディターは以下のように表示されるようになりました。

タイトルとアイキャッチ部分

タイトルとアイキャッチ部分

見出し部分など

これはブラウザの表示ではなくて、WLWエディターの表示です。

見出し部分など

僕はこれまで「テーマの更新」機能はまともに使ったことはなかったのですが、ここまで正確に表示されるとは思っていませんでした。

ここらへんは、テーマの更新前の画像と比較すると分りやすいと思います。

「テーマの更新」前

テーマの更新前の見出し部分

プレビュー画面など

プレビュー画面なんて、もうほとんどブラウザと同じです。

プレビュー画面

プレビュー画面2

まとめ

これまでWindows Live Writerの「テーマの更新」機能は、うまくいったことがなかったので放置していました。

しかしそれが、なんともったいないことだったのか。編集のしやすさが段違いです。

まず、いつも見慣れている画面と、文字の大きさと、カラム幅なので見やすさが全然違います。すごく読みやすいので、確認作業がはかどり、誤字脱字の発見がしやすくなりました。

もし、Windows Live Writerで、テーマのスタイルを反映させて利用していない場合は、是非この機会に「テーマの更新」を成功させることをお勧めします。

本当、この編集のしやすさをこれまで味わえなかったのは、ものすごく損した気分。

Simplicityで「テーマの更新」を成功させる方法

SimplicityでWindows Live Writerのテーマ更新を成功させる具体的な方法を書きました。

Simplicity&WLWユーザーで、「テーマの更新」がうまくいかない場合は、以下の方法を試してみてください。

12436288584_94d6bc46d2_b.jpg
SimplicityでWindows Live Writerのテーマ更新が失敗するなんて人には、1度試してみて欲しい方法です。