WordPress – リボン日記

複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

何ができるか

複数の外部ブログの最新記事を取得し、更新日でソートして降順に並べられる

背景

カテゴリが異なるサイトの更新情報を、それぞれのWordPress 記事として投稿している。大本のサイトでは、全情報を表示できるようにしたい。なおかつ、時系列でソートしたい。

技術情報

jQuery の$.getJSON(url, function(results){…}) で各店のWordPress ブログ記事を取得
- getJSON()は非同期通信なので、データ取得後にHTML の描写を行うようにする
取得したJSON データで必要なものをallArticles.push() で格納
- 配列”allArticles” にオブジェクトを追加している
全データ取得後、underscore.js を使い、allArticles をsortBy() で時系列降順にソート
- 各店のJSON 読み込みにばらつきがあるので、setTimeout() で2秒の待機時間を付けている
- allArticles をHTML として書き出す

配列を指定した項目でソートする

事前準備

jquery および、underscore.js を事前に読み込んでおく

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/underscore.js"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="/js/underscore.js"></script>

underscore.js のsortBy() を使って、数字を降順に並べる

var obj =[
	{
        	title: '悪魔城ドラキュラ',
        	year: 1994,
        	author: "Michiru Yamane"
	},

	{
        	title: 'FF5',
        	year: 1992,
        	author: "Nobuo Uematsu"
	},

	{
        	title: 'FF4',
        	year: 1991,
        	author: "Nobuo Uematsu"
	},

	{
        	title: 'FF6',
        	year: 1992,
        	author: "Nobuo Uematsu"
	}
	];
var func = function(obj) {
	return -obj.year;

}
var re = _.sortBy(obj, func);

console.log(re);

var obj =[

{

title: '悪魔城ドラキュラ',

year: 1994,

author: "Michiru Yamane"

{

title: 'FF5',

year: 1992,

author: "Nobuo Uematsu"

{

title: 'FF4',

year: 1991,

author: "Nobuo Uematsu"

{

title: 'FF6',

year: 1992,

author: "Nobuo Uematsu"

}

];

var func = function(obj) {

return -obj.year;

}

var re = _.sortBy(obj, func);

console.log(re);

出力結果

0: Object { title: "悪魔城ドラキュラ", year: 1994, author: "Michiru Yamane" }
1: Object { title: "FF5", year: 1992, author: "Nobuo Uematsu" }
2: Object { title: "FF6", year: 1992, author: "Nobuo Uematsu" }
3: Object { title: "FF4", year: 1991, author: "Nobuo Uematsu" }

0: Object { title: "悪魔城ドラキュラ", year: 1994, author: "Michiru Yamane" }

1: Object { title: "FF5", year: 1992, author: "Nobuo Uematsu" }

2: Object { title: "FF6", year: 1992, author: "Nobuo Uematsu" }

3: Object { title: "FF4", year: 1991, author: "Nobuo Uematsu" }

year を比較して、降順に並び変わった

JavaScript で、複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

HTML

<div class="p-article__main"></div>

1	<div class="p-article__main"></div>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/underscore.js"></script>


<script type="text/javascript">
	jQuery( function () {
		/* 記事のオブジェクト グローバル変数 */
		allArticles = [];
		/* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/
		/* 1番目のWordPress 記事を取得 */
		getBlogInfo("http://www.sakuranomichi.jp/wordpress/wp-json/wp/v2/posts?_embed&per_page=2", "リボン日記2記事");
		/* 2番目のWordPress 記事を取得して書き出し(複数ないので、同じブログを流用) */
		getBlogInfo("http://www.sakuranomichi.jp/wordpress/wp-json/wp/v2/posts?_embed&per_page=4", "リボン日記4記事", true);
		/* JSON を取得して、ブログ最新記事を変数に格納 */
		function getBlogInfo(url, blog_name, display_b) {
			/* 各WordPress のJSON を読み込んで、記事を表示する*/
			jQuery.getJSON( url, function(results) {
				/* 取得した記事をオブジェクトに格納する */
				jQuery.each(results, function(i, item) {
					var date_data = new Date(item.date); /* 記事の日付を取得 */
					var year = date_data.getFullYear();
					var month = date_data.getMonth() + 1;
					var day = date_data.getDate();

					var title = item.title.rendered; /* 記事タイトル */
					var link = item.link;  /* 記事URL */
					var date = year + '年' + month + '月' + day + '日'; /* 表示用日付 */
					var datetime = year + '-'+ addzero(month) + '-' + addzero(day); /* time タグのdatetime 値用日付 */
					var datenum = Number(year  + addzero(month)  + addzero(day)); /* ソート用の日付を数値で取得 */
					/* 記事アイキャッチ画像の取得*/
					var thum
					if (item._embedded["wp:featuredmedia"]) {
						thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url
					} else {
						thum = "/images/basic/logo.jpg"; /* 代替画像 */
					}
					addData = {
							title: title,
							link: link,
							thum: thum,
							datetime: datetime,
							datenum: datenum,
							date : date,
							name : blog_name
					}
					allArticles.push(addData);
				});
				/* ブログデータを非同期で最後まで取得したら、記事を表示する */
				if (display_b) {
					/* 2秒の遅延動作で、各店のJSON 読み込み時間差をなくす*/
					setTimeout(function(){
					  /* allArticles の参照が早いと、ブログの読み込みが間に合わない時がある */
					  /* 日付でソート */
					  allArticles = _.chain(allArticles).sortBy( function(item) { return -item.datenum;}).value();
					  showBlogInfo(); /* 記事データを作成 */
					}, 2000);
				}
			});
		}
		function showBlogInfo() {
			/* 記事データを作成 */
			var article = "";
			/* 配列から、日付でソートされた記事データを順に取り出す */
			for (var ij in allArticles) {
				article += '<div><a href="'+
					allArticles[ij].link + '" target="_blank">' +
					'<div><img src="' +
					allArticles[ij].thum + '" alt="' + allArticles[ij].title + '"></div>' +
					'<p><time datetime="' +
					allArticles[ij].datetime + '">' +
					allArticles[ij].date + '</time></p>' +
					'<p">' +
					allArticles[ij].title + '</p>' + '<p>' +
					allArticles[ij].name + '</p></a></div>';
			}
			/* 記事をまとめて表示 */
					/* 記事の書き出し */
					jQuery(".p-article__main").append(article);
		}
		//数値が一桁だとゼロを足す
		function addzero(num) {
			if (num < 10) {
				num = "0" + String(num);
			} else {
				num = String(num);
			}
			return num;
		}
	} );
</script>

jQuery( function () {

/* 記事のオブジェクトグローバル変数 */

allArticles = [];

/* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/

/* 1番目のWordPress 記事を取得 */

getBlogInfo("http://www.sakuranomichi.jp/wordpress/wp-json/wp/v2/posts?_embed&per_page=2", "リボン日記2記事");

/* 2番目のWordPress 記事を取得して書き出し(複数ないので、同じブログを流用) */

getBlogInfo("http://www.sakuranomichi.jp/wordpress/wp-json/wp/v2/posts?_embed&per_page=4", "リボン日記4記事", true);

/* JSON を取得して、ブログ最新記事を変数に格納 */

function getBlogInfo(url, blog_name, display_b) {

/* 各WordPress のJSON を読み込んで、記事を表示する*/

jQuery.getJSON( url, function(results) {

/* 取得した記事をオブジェクトに格納する */

jQuery.each(results, function(i, item) {

var date_data = new Date(item.date); /* 記事の日付を取得 */

var year = date_data.getFullYear();

var month = date_data.getMonth() + 1;

var day = date_data.getDate();

var title = item.title.rendered; /* 記事タイトル */

var link = item.link; /* 記事URL */

var date = year + '年' + month + '月' + day + '日'; /* 表示用日付 */

var datetime = year + '-'+ addzero(month) + '-' + addzero(day); /* time タグのdatetime 値用日付 */

var datenum = Number(year + addzero(month) + addzero(day)); /* ソート用の日付を数値で取得 */

/* 記事アイキャッチ画像の取得*/

var thum

if (item._embedded["wp:featuredmedia"]) {

thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url

} else {

thum = "/images/basic/logo.jpg"; /* 代替画像 */

}

addData = {

title: title,

link: link,

thum: thum,

datetime: datetime,

datenum: datenum,

date : date,

name : blog_name

}

allArticles.push(addData);

});

/* ブログデータを非同期で最後まで取得したら、記事を表示する */

if (display_b) {

/* 2秒の遅延動作で、各店のJSON 読み込み時間差をなくす*/

setTimeout(function(){

/* allArticles の参照が早いと、ブログの読み込みが間に合わない時がある */

/* 日付でソート */

allArticles = _.chain(allArticles).sortBy( function(item) { return -item.datenum;}).value();

showBlogInfo(); /* 記事データを作成 */

}, 2000);

}

});

}

function showBlogInfo() {

/* 記事データを作成 */

var article = "";

/* 配列から、日付でソートされた記事データを順に取り出す */

for (var ij in allArticles) {

article += '<div><a href="'+

allArticles[ij].link + '" target="_blank">' +

'<div><img src="' +

allArticles[ij].thum + '" alt="' + allArticles[ij].title + '"></div>' +

'<p><time datetime="' +

allArticles[ij].datetime + '">' +

allArticles[ij].date + '</time></p>' +

'<p">' +

allArticles[ij].title + '</p>' + '<p>' +

allArticles[ij].name + '</p></a></div>';

}

/* 記事をまとめて表示 */

/* 記事の書き出し */

jQuery(".p-article__main").append(article);

}

//数値が一桁だとゼロを足す

function addzero(num) {

if (num < 10) {

num = "0" + String(num);

} else {

num = String(num);

}

return num;

}

} );

</script>

解説

getBlogInfo() で指定されたWordPress のJSON を取得して、ブログ最新記事を変数に格納
showBlogInfo() で記事をHTML に書きだす
取得した記事をソートするとき、配列”allArticles”が空だった時が一番作業が煮詰まった。
jQuery.getJSON() が非同期通信するため、読み込みが終わっていないタイミングで配列を参照していたのが原因だった。
取得した記事のソートはこの部分。”-item.datenum” のマイナスを記載すると、降順になる。

allArticles = _.chain(allArticles).sortBy( function(item) { return -item.datenum;}).value();

1	allArticles = _.chain(allArticles).sortBy( function(item) { return -item.datenum;}).value();

参考

sortBy()
http://www.elder-flower.com/blog/2015/04/sortby.html
sortBy() の使い方

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

何ができるか？

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

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

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

<?php require_once ('./wp/wp-load.php'); ?>

1	<?php require_once ('./wp/wp-load.php'); ?>

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

方法

jQuery で、WordPress のJSON を読み込む

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

http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3

1	http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3

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

HTML の表示部分

<div class="p-blog__first"></div>

1	<div class="p-blog__first"></div>

JavaScript コード

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- jquery を読み込み -->
    <script type="text/javascript">
        $.getJSON( "http://www.hogehoge.com/wp/wp-json/wp/v2/posts?_embed&per_page=3", function(results) {
            $.each(results, function(i, item) {
                var date_data = new Date(item.date);
                var year = date_data.getFullYear();
                var month = date_data.getMonth() + 1;
                var day = date_data.getDate();
                var title = item.title.rendered;
                var link = item.link;
                var date = year + '年' + month + '月' + day + '日';
                var datetime = year + '-' + month + '-' + day;
                /* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/
                var thum
                if (item._embedded["wp:featuredmedia"]) {
                    thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url
                } else {
                    thum = "/images/logo.jpg";
                }
                /* 記事の書き出し */
                $(".p-blog__first").append(
                "<div class='p-blog'>
                <a href='"+
                link + "' class='p-blog__link'>" +
                "<div class='p-blog__thumb'><img src='" +
                thum + "' alt='#'></div>" +
                "<p class='p-blog__date'><time datetime='" +
                datetime + "'>" +
                date + "</time></p>" +
                "<p class='p-blog__title'>" +
                title + "</p></a></div>");
            });
        });
        </script>

$.getJSON( "http://www.hogehoge.com/wp/wp-json/wp/v2/posts?_embed&per_page=3", function(results) {

$.each(results, function(i, item) {

var date_data = new Date(item.date);

var year = date_data.getFullYear();

var month = date_data.getMonth() + 1;

var day = date_data.getDate();

var title = item.title.rendered;

var link = item.link;

var date = year + '年' + month + '月' + day + '日';

var datetime = year + '-' + month + '-' + day;

/* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/

var thum

if (item._embedded["wp:featuredmedia"]) {

thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url

} else {

thum = "/images/logo.jpg";

}

/* 記事の書き出し */

$(".p-blog__first").append(

"<div class='p-blog'>

<a href='"+

link + "' class='p-blog__link'>" +

"<div class='p-blog__thumb'><img src='" +

thum + "' alt='#'></div>" +

"<p class='p-blog__date'><time datetime='" +

datetime + "'>" +

date + "</time></p>" +

"<p class='p-blog__title'>" +

title + "</p></a></div>");

});

</script>

複数ブログを読み込む

HTML の表示部分

<div class="p-blog__first"></div>
<div class="p-blog__second"></div>

1 2	<div class="p-blog__first"></div> <div class="p-blog__second"></div>

JavaScript コード

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery( function () {
        /* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/
        /* 1つ目のブログ最新記事を表示 */
        readBlogJson("http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__first");
        /* 2つ目のブログ最新記事を表示 */
        readBlogJson("http://www.hogehoge.com/wp2/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__second");
    });
    /* JSON を取得して、ブログ最新記事を表示 
     * 引数は、url:WordPress JSON のURL、dom:内容を表示するHTMLのクラス名 */
    function readBlogJson(url, dom) {
    /* 各WordPress のJSON を読み込んで、記事を表示する*/
        $.getJSON( url, function(results) {
            $.each(results, function(i, item) {
                var date_data = new Date(item.date);
                var year = date_data.getFullYear();
                var month = date_data.getMonth() + 1;
                var day = date_data.getDate();
                var title = item.title.rendered;
                var link = item.link;
                var date = year + '年' + month + '月' + day + '日';
                var datetime = year + '-' + month + '-' + day;
                /* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/
                var thum
                if (item._embedded["wp:featuredmedia"]) {
                    thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url
                } else {
                    thum = "/images/logo.jpg";
                }
                /* 記事の書き出し */
                $(dom).append(
                "<div class='p-blog'><a href='"+
                link + "' class='p-blog__link'>" +
                "<div class='p-blog__thumb'><img src='" +
                thum + "' alt='#'></div>" +
                "<p class='p-blog__date'><time datetime='" +
                datetime + "'>" +
                date + "</time></p>" +
                "<p class='p-blog__title'>" +
                title + "</p></a></div>");
            });
        });
    }
    </script>

jQuery( function () {

/* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/

/* 1つ目のブログ最新記事を表示 */

readBlogJson("http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__first");

/* 2つ目のブログ最新記事を表示 */

readBlogJson("http://www.hogehoge.com/wp2/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__second");

});

/* JSON を取得して、ブログ最新記事を表示

* 引数は、url:WordPress JSON のURL、dom:内容を表示するHTMLのクラス名 */

function readBlogJson(url, dom) {

/* 各WordPress のJSON を読み込んで、記事を表示する*/

$.getJSON( url, function(results) {

$.each(results, function(i, item) {

var date_data = new Date(item.date);

var year = date_data.getFullYear();

var month = date_data.getMonth() + 1;

var day = date_data.getDate();

var title = item.title.rendered;

var link = item.link;

var date = year + '年' + month + '月' + day + '日';

var datetime = year + '-' + month + '-' + day;

/* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/

var thum

if (item._embedded["wp:featuredmedia"]) {

thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url

} else {

thum = "/images/logo.jpg";

}

/* 記事の書き出し */

$(dom).append(

"<div class='p-blog'><a href='"+

link + "' class='p-blog__link'>" +

"<div class='p-blog__thumb'><img src='" +

thum + "' alt='#'></div>" +

"<p class='p-blog__date'><time datetime='" +

datetime + "'>" +

date + "</time></p>" +

"<p class='p-blog__title'>" +

title + "</p></a></div>");

});

}

</script>

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 のバージョン確認

>gem -v
2.7.4

1 2	>gem -v 2.7.4

バージョンが出力される

>gem update --system

1	>gem update --system

アップデートが始まる

Sass とCompass をインストール

 gem install sass
 gem install compass

1 2	gem install sass gem install compass

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

>sass -v
Sass 3.5.4 (Bleeding Edge)
>compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2018 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

>sass -v

Sass 3.5.4 (Bleeding Edge)

>compass -v

Compass 1.0.3 (Polaris)

Released under the MIT License.

Compass is charityware.

Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

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

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

wordpress
└wp-content
　└mytheme
　　├config.rb //Compass の設定ファイル
　　├compass_start.bat Sass //ファイルを監視して、Compass を自動でコンパイルするバッチファイル
　　├style.css // WordPress テーマのスタイルシート、ここに書き出す
　　├scss
　　├images
　　└js

wordpress

└wp-content

　└mytheme

　　├config.rb //Compass の設定ファイル

　　├compass_start.bat Sass //ファイルを監視して、Compass を自動でコンパイルするバッチファイル

　　├style.css // WordPress テーマのスタイルシート、ここに書き出す

　　├scss

　　├images

　　└js

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

Compass の初期設定

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

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

>compass create

1	>compass create

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

mytheme
├config.rb
├sass
│├ie.scss
│├print.scss
│└screen.scss
└stylesheets
  ├ie.css
  ├print.css
  └screen.css

mytheme

├config.rb

├sass

│├ie.scss

│├print.scss

│└screen.scss

└stylesheets

├ie.css

├print.css

└screen.css

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

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

require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

require 'compass/import-once/activate'

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:

http_path = "/"

css_dir = "stylesheets"

sass_dir = "sass"

images_dir = "images"

javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):

# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:

# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:

# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this

# project again passing --syntax sass, or you can uncomment this:

# preferred_syntax = :sass

# and then run:

# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

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

config.rb の記述

 http_path = "/"
 css_dir = "."
 sass_dir = "scss"
 images_dir = "images"
 javascripts_dir = "js"

http_path = "/"

css_dir = "."

sass_dir = "scss"

images_dir = "images"

javascripts_dir = "js"

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

compass_start.bat の設定

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

 compass w

compass w

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

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

動作テスト

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

C:\xampp\htdocs\wordpress\wp-content\themes\mytheme&gt;compass w
&gt;&gt;&gt; Compass is watching for changes. Press Ctrl-C to Stop.

1 2	C:\xampp\htdocs\wordpress\wp-content\themes\mytheme>compass w >>> Compass is watching for changes. Press Ctrl-C to Stop.

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

 .test {color:red}

1	.test {color:red}

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

 modified scss/test.scss
   write test.css

1 2	modified scss/test.scss write test.css

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

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

 /*
 Theme Name: mytheme
 Description:  わたし のブログ
 Version: 0.1
 Author: Ed_CREATE
 Author URI: http://sakuranomichi.jp/
 */

Theme Name: mytheme

Description: わたしのブログ

Version: 0.1

Author: Ed_CREATE

Author URI: http://sakuranomichi.jp/

これを

 /*!
 Theme Name: mytheme
 Description:  わたし のブログ
 Version: 0.1
 Author: Ed_CREATE
 Author URI: http://sakuranomichi.jp/
 */

/*!

Theme Name: mytheme

Description: わたしのブログ

Version: 0.1

Author: Ed_CREATE

Author URI: http://sakuranomichi.jp/

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

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

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

できたこと

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

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

mysite
├config.rb //Compass の設定ファイル
├css //コンパイル後のCSSファイルを格納
├scss //コンパイル前のSass ファイルが保存されている
├images
└js

mysite

├config.rb //Compass の設定ファイル

├css //コンパイル後のCSSファイルを格納

├scss //コンパイル前のSass ファイルが保存されている

├images

└js

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

wordpress
└wp-content
　└mytheme
　　├config.rb
　　├style.css //コンパイル後のCSSファイルをテーマ直下のディレクトリに書き出したい
　　├scss //コンパイル前のSass ファイルが保存されている
　　├images
　　└js

wordpress

└wp-content

　└mytheme

　　├config.rb

　　├style.css //コンパイル後のCSSファイルをテーマ直下のディレクトリに書き出したい

　　├scss //コンパイル前のSass ファイルが保存されている

　　├images

　　└js

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

wordpress
└css
　└wp-content
　　└mytheme
　　　└style.css

wordpress

└css

　└wp-content

　　└mytheme

　　　└style.css

こうなったり、

wordpress
└wp-content
　└mytheme
　　└wp-content
　　　└themes
　　　　└mytheme
　　　　　└scss
　　　　　　└style.css

wordpress

└wp-content

　└mytheme

　　└wp-content

　　　└themes

　　　　└mytheme

　　　　　└scss

　　　　　　└style.css

こうなる。

wordpress
└wp-content
　└mytheme
　　└scss
　　　└style.css

wordpress

└wp-content

　└mytheme

　　└scss

　　　└style.css

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

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

まとめ

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

何ができるか

背景

技術情報

配列を指定した項目でソートする

事前準備

出力結果 ​

JavaScript で、複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

解説

参考

何ができるか？

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

方法

複数ブログを読み込む

目的

背景

Windows でSass とCompass を使う

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

Sass とCompass をインストール

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

Compass の初期設定

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

できたこと

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

出力結果

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