WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示する方法

何ができるか?

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示できる。

WordPress のテンプレートタグは使えないのか?

「複数サイト」という条件があると、使えない。

PHP でこれを付けると、同じドメインに限り記事を読み込めるが、「複数サイト」で読み込む方法が見つからなかった。

方法

jQuery で、WordPress のJSON を読み込む

“http://www.hogehoge.com/wp1/” にWordPress がインストールされている場合、次のURL でアクセスすると、JSON が取得できる。

“posts”以降の記述は、”_embed”で写真データを要求、”per_page=3” で記事を3つ取得

HTML の表示部分

JavaScript コード

複数ブログを読み込む

HTML の表示部分

JavaScript コード

Sass, Compass の導入

目的

DreamWeaver などのエディタで、Sass, Compass の自動コンパイルを使えるようにする。

背景

DreamWeaver のCompass コンパイルを使おうとすると、予期せぬ振る舞いでCSS書き出しディレクトリを指定できなかった

参考:DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった

Windows でSass とCompass を使う

SassとCompassのインストールの方法

Ruby をインストールする
Ruby をダウンロードしてインストール
https://rubyinstaller.org/downloads/

  • Ruby 2.x.x-x (x64) – Windows が64bit の場合
  • Ruby 2.x.x-x (x86) – Windows が32bit の場合

インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れるのを忘れずに。

コマンドプロンプトを立ち上げる
[Windows]キーを押して、”cmd”と入力
gem のバージョン確認

バージョンが出力される

アップデートが始まる

Sass とCompass をインストール

インストールが終わったらバージョンを確認する

バージョンの確認ができれば、インストール済みだと分かる。
※compass のインストールで、新しすぎるruby だとインストールできないエラーが起きた。
この場合、Ruby を一旦アンインストールし、1つ前のバージョンをインストールして試す。

WordPress インストール済みのディレクトリ構造

“config.rb”, “compass_start.bat” はこのあと作成する。

Compass の初期設定

コマンドプロンプトで、Sass, Compass を作成するディレクトリに移動する
面倒なら、エクスプローラーを開いて、該当するテーマのフォルダを開き、アドレスバーを選択(ショートカット[Alt+D])して”cmd”と入力

コマンドプロンプトで次のように入力

実行すると、次のようなファイルが作成される。

“sass”, “stylesheets” のフォルダは今回使わないため、エクスプローラーから削除しておく。

ツールを使って書き出される、デフォルトの設定

これを、WordPress テーマ内の構造に合わせて書き換える

config.rb の記述

CSS はテーマ直下のstyle.css として書き出す

compass_start.bat の設定

メモ帳などのエディタを開いて、下記を記述。

ファイルを保存するとき、テーマ内のフォルダを指定、”compass_start.bat”と名付けて保存
ただし、エクスプローラーで確認すると”compass_start.bat.txt” のようにテキストファイルの拡張子がついていることがあるため、ファイル名の”.txt”を削除

ランチャーを使っている場合、compass_start.bat はランチャーに登録しておく

動作テスト

compass_start.bat を実行
コマンドプロンプトが立ち上がって、監視が始まる

scss/test.scss を作成
試しにCSS を書く

ファイルを保存するとコマンドプロンプトにコンパイルの結果が表示される

書き出しが成功したら、テーマ直下に”test.css” が出力される
compass_start.bat の監視を終了するには、コマンドプロンプトで[Ctrl+C]を押した後のあと”y”と入力して[Enter]を押す

scss/style.scss を作成、WordPress のテーマ設定コメントが消えないようにする

これを

このように書き換え。
コメント開始を”/*!”にすることで、コンパイル時にWordPress で使うコメントが削除されなくなる

DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった

結論から書くと、DreamWeaver CC を使い、WordPress テーマ内にSass, Compass を使う場合は、DreamWeaver のコンパイルを切って、Ruby のコンパイルを使ったほうが時間を無駄にしないと思う。

できたこと

Dreamweaverで覚える最新Web開発ワークフロー: Sass編 を読むと、Ruby の知識がなくても、Sass, Compass が容易に使えるようになる。

ディレクトリ構造は次のような感じ

できなかったこと
wordpress ディレクトリがルートディレクトリで、テーマ内にscss, config.rb, style.css を保存しようとした

コンパイルするとどうなるか?

こうなったり、

こうなる。

これはましな方だが、狙ったディレクトリにCSS ファイルが書き出されない問題は残ったままだ。

Sass だけなら、「サイト設定>CSS プリプロセッサー>ソースと出力」で出力フォルダをテーマ内に指定するだけで、正しく書き出してくれる。だが、同サイト設定で、Compass>「Compass を使用する」でテーマ内のconfig.rb を指定すると、書き出し時のディレクトリ構造がおかしくなる。

まとめ

DreamWeaver CC のコーディング機能は快適で有用だが、Compass のふるまいだけは制御できなかった。