【Twenty Seventeenのちょこっとカスタマイズ】投稿ページに表示される記事を絞り込む

前回に引き続き、Wordpressの新テーマ、Twenty Seventeenのカスタマイズについて。

フロントページに表示される記事一覧をあるカテゴリーに絞り込むことは出来たのですが、そうすると該当ページ(news)をクリックした時にはまだ全カテゴリーの記事が表示されてしまう事態が起きます。

これに対応するために、index.phpを弄ります。(なぜindex.phpなのかは前記事のプラス解説を参照してください。)

/wp-content/themes/twentyseventeen/index.php

を子テーマにコピーして

				/* Start the Loop */
				while ( have_posts() ) : the_post();

					/*
					 * Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 */
					get_template_part( 'template-parts/post/content', get_post_format() );

				endwhile;

ここのWhile文の中に条件を付け加えます。

コメントもとっぱらって、

				while ( have_posts() ) : the_post();
                    			if (in_category("news")) {
						get_template_part( 'template-parts/post/content', get_post_format() );
                    			}
				endwhile;

こんな感じに。

in_category(“slug”)またはin_category(id)で、投稿がそのカテゴリーに含まれるかどうかがチェックできます(参照:関数リファレンス/in category – WordPress Codex 日本語版)。

これで、newsページをクリックしても全記事ではなくニュースカテゴリーに入っている記事だけが表示されるようになります。

プラス解説

in_category()によく似た関数に、is_category()というのがあって、こちらは

カテゴリーアーカイブページであれば true、そうでなければ false

なので投稿のチェックにはなりませんので要注意。

さて、カテゴリーをしぼり込んだわけですが、ということは他のカテゴリーの記事を表示するページが必要になります。
でもカテゴリーなわけなので、カテゴリーの記事一覧を指定してあげれば問題ないはず。

・・・とここまで書いてきてやっと気が付きましたが、そもそもindex.phpをイジらなくても

yoursite.com/news

というURLを使わせずに、

yoursite.com/category/news

を見てもらえば良いわけですね。そうだったー。

つまり、メニューで固定ページへのリンクを使わずに、カテゴリーへのリンクを使えばいいというわけです。(メニューの編集方法は公式サイトなどを参照のこと

後は念のために、

yoursite.com/news

へのアクセスを切り替えれば良いのかなあ。別に要らない気もしますが(気になる方は上のようにindex.phpをいじっちゃえば良いし、.htaccess使うとか色々と方法はあります)。

それより、カテゴリー一覧だと、タイトルに「カテゴリー: ニュース」みたいに出ちゃうのをなんとかしましょうかね。ここねー、spanタグでも挟んでくれれば良いのに素で出力してくれちゃうという、wordpressさんの中の人に真意を聞きたいポイントの一つです。次回はここを書いてみたいと思います。

【Twenty Seventeenのちょこっとカスタマイズ】フロントページの記事のカテゴリーを絞る

昨日に引き続き、Wordpressのカスタマイズについてです。

Twenty Seventeenではフロントページのカスタマイズがかなり簡単になっています。4ページ分の固定ページのコンテンツを載せられて、そのうち一つは記事一覧も出せます。

でもブログっぽくないページを目指すには全記事一覧が出ちゃうとちょっとなあというケースがあると思います。そういうときは子テーマを作ってさくっとカスタマイズしてしまいましょう。

※ここでは、フロントページを固定ページに、投稿ページをnewsというニュース記事ページに設定している前提でお話してみます。

そもそも何処で動いているのか

まずはテーマオプションで指定できる、フロントページの最大4つのセクションを出力する箇所をピックアップしてみます。 “【Twenty Seventeenのちょこっとカスタマイズ】フロントページの記事のカテゴリーを絞る”の続きを読む

【Twenty Seventeenのちょこっとカスタマイズ】Powered by を書き換える

ひさびさにWordpressを弄っています。色々と変わりましたね。
子テーマとか楽しいなあ。カスタマイズがらくちん。だけれど忘れてしまうのでメモしておこうと思います。(子テーマの作り方は公式サイトなどを参考にしてください。)

Twenty Seventeen、とても良いテーマです。というか、4.7が良いのかな。子テーマまで踏み込まなくてもかなり簡単に色々とカスタマイズ出来ますね。

とはいえ、自分色に思う存分染められるのがWordpressの醍醐味。というわけで、先ずはちょっと申し訳ない気持ちは持ちつつも「Proudly powered by WordPress」をさくっと変更してしまいましょう。子テーマは作っておいてくださいね(このぐらいの変更なら直接親テーマをいじってしまっても良いでしょうけれど)。

Twenty Seventeenのソースの中から該当するファイルを見つけます。

/wp-content/themes/twentyseventeen/template-parts/footer/site-info.php

を子テーマ(ここではtwentyseventeen-child)にコピーします。 “【Twenty Seventeenのちょこっとカスタマイズ】Powered by を書き換える”の続きを読む

HTML5 boilerplateをsassでgulpでstyledoccoな感じにしてみた

Google web starter kit を触っていて、gulpstyledoccoという素敵ツールを知ったのでhtml5 boilerplateをベースにsassとgulpを導入してstyledoccoでstyleguideも自動生成する、というのを作ってみました。(・・・Google web starter kitをベースにする方が早い気もするのですが、モジュールやらコンポーネントの内容やSassの構成とかがイマイチ凡人には理解しかねたので今後のアップデートに超期待しています。)

といっても、ほぼGoogle web starter kit のgulpfile.jsをぱく・・・参照させていただいております。ディレクトリを変えて、styledoccoのためのソースを加えただけ。

手順

前準備:gulpは公式を参照に予めインストールしているとして。

1. 先ずはHTML5 boilerplateをダウンロード。
プレーンなやつを。お好きなディレクトリ(ここではappディレクトリ)に展開してください。

2. いっこ上のディレクトリにgulpfile.jsをおきます。
Google web starter kitから中身を有難く頂戴してコピペしディレクトリ名とかをコソコソ書き換えます。(本来は、gulpをイチから学ぶ方が今後のために良いと思いますが!)

3. ターミナルなどを使ってコマンドラインからgulpをたたいてみます。

gulp

エラーは大抵gulpのプラグインが無いってやつだと思うので該当プラグインをガシガシ入れていきましょう。
(私はsassファイルの拡張子(scss)を間違えたり、消したファイルを参照していたりドジばっかりしていたので、いっろいろ怒られましたが…。)

※注:・・・あとで気が付きましたが、gulp-load-pluginsていう便利なものがあるそうで、Google web starter kit もこれを使ってますね・・・。package.jsonに書いておいて一括インストールとかも出来るそうです・・・。ぜひそちらをオススメします。

4. そしてgulp-styledoccoも入れます。

npm install gulp-styledocco --save-dev

gulpfile.jsにstyledoccoのタスクを追加します。
watchしてくれるように、serveにも追加しちゃいましょう。

//(前略)
var styledocco = require('gulp-styledocco');

//Style Guide
gulp.task('styledocco', function () {
  gulp.src('app/css/main.css')
    .pipe(styledocco({
      out: 'docs',
      name: 'yourProjectName'
    }));
});

//(中略)

// Watch Files For Changes & Reload
gulp.task('serve', function () {
    browserSync.init(null, {
        server: {
            baseDir: ['app', '.tmp']
        },
        notify: false
    });

    gulp.watch(['app/**/*.html'], reload);
    gulp.watch(['app/css/**/*.{css,scss}'], ['styles','styledocco']);
    gulp.watch(['.tmp/css/**/*.css'], reload);
    gulp.watch(['app/js/**/*.js'], ['jshint']);
    gulp.watch(['app/img/**/*'], ['images']);
});

//(後略)

5. HTML5 boilerplateのCSSをいい感じにSASSに変えていきます。

私は単純にcssディレクトリ内にsassディレクトリを作ってbase、helper、printとかに適当に分けてmain.sassにimportするという適当な構成にしましたが、mixinとか使ってきっちり作っている方もいらっしゃるのでご参照ください。

xtine/compass-sass-html5boilerplate
これはcompaass使っているバージョンなのでsassの構成だけ参照するといいんじゃないでしょうか。

6. gulpfile.jsのSASSのコンパイル関連をちょっと弄ります。

私の構成の場合はmain.sassだけ見てくれればいいので、

//Compile Sass for test
gulp.task('styles:test', function () {
    return gulp.src('app/css/sass/main.scss')
        .pipe(sass({style: 'expanded'}))
        .pipe(gulp.dest('app/css'));
});

とかいうtaskを作って

// Output Final CSS Styles
gulp.task('styles', ['styles:test', 'styles:css']);

stylesタスクを書き換えちゃいます。

7. ビルドするときのcssファイルを変更。(追記: 2014-07-07 13:07)

gulpfile.jsのhtmlタスクをちょっと弄ります。
replaceのファイル名と、minifyHtmlのオプションを追加(IEのコンディショナルコメントを残すため)。

// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
    return gulp.src('app/**/*.html')
//(中略)
        // Update Production Style Guide Paths
        .pipe($.replace('css/main.css', 'css/main.min.css'))
//(中略)
        // Minify Any HTML
        .pipe($.minifyHtml({conditionals:true}))
//(中略)
});

このままビルドすると怒られるので、HTMLのstylesheetのlinkタグらへんを弄ります。

<!-- build:css css/main.min.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

8. gulpにwatchして貰いながらレッツコード!

gulp serve

としてレッツコード!保存したら、sassをコンパイルしてくれて、自動でリロードして、スタイルガイドも更新される!素敵!あ、画像の最適化もしてくれるよ!

9. ビルド

gulp build

でdistディレクトリ以下にビルドしてくれます。

感想

gulp.jsは、Codekitのお手軽さに比べると、バリバリこまんどらいんでひくとは思いますが、慣れるとこっちのがシンプルで良いような気がします。文法はJSだし、カスタムバッチコーイな感じも良い。

私的にはsytledoccoが素敵過ぎる。styledocco入れるとcss(sass)の書き方が変わると思う。今度こそまじめにモジュール化していこう。

・・・全部のソースをGithubにアップしたらいいやんとも思ったのですが、あんまりに寄せ集めなのでtipsを記録がてら書きだすだけにしました。きっともう少ししたら、こういうパッケージをえらいひとがちゃんと作ってくれるはず。

続:CSSフレームワークGumbyとFoundationを触ってみた

意外にも続報が早めに書けました。といってもGridとRetina Imagesの2つについてぐらいだけれども。

1. Gridなど

基本的なGridの作り方は、rowの中にcolumnsを突っ込む感じでほぼ同じ。

Gumbyの場合
http://foundation.zurb.com/docs/components/grid.html

小さい画面になると基本的に全カラムが全幅になる感じ。
カラム数が12と14とか、混在させたりも出来るけれど使うところあるのかな・・・。

画像とテキストの組み合わせだと、

Vertical Alignment
http://gumbyframework.com/docs/components/#!/vertical-alignment

を使うと小さい画面でも綺麗に並ぶ。(ずらっと並べるタイル表示は別に方法がある)

あとは

FitText
http://gumbyframework.com/docs/extensions/#!/fittext

というのもあって、画面サイズによってフォントサイズを変えることも可能。

・・・細かいのは自分で作れ、というかそういうデザインには合わないのかな。確かに余程のことがないと小さい画面でグリッド分けるのは避けるべきだなあと思うのでこれで良いのかもしれない。そこがいい感じに見えるキモかもしれない。・・・もしかしたら他に方法があるかも知れないけれど、多分そんな感じ。

Foundationの場合
http://foundation.zurb.com/docs/components/grid.html

画面サイズをSmall、Medium、Largeの3段階で表示するカラム数を選べる。
前の記事にGumbyのMixinのことを書いたけれど、やっぱりFoundationにもたくさんMixinが用意されていてCSS内で完結することも出来そう。
・・・やれることが多すぎて書くことがありません。

2. Retina Images

(予めRetina用の画像を用意して@2xつけて保存しておく。)

Gumbyの場合
http://gumbyframework.com/docs/components/#!/retina-images

retina用の画像を同じフォルダに入れてgumby-retinaて書くだけ。

<img src="/images/logo.png" gumby-retina />

シンプルで便利なんだけどバリデーションしたら無論怒られる。(Gumbyはバリデーションで怒られる前提で使う勇気が必要だ。)

Foundationの場合
http://foundation.zurb.com/docs/components/interchange.html#using-retina-images

Foundationは独自データ属性のdata-interchangeで画像の切り替えを扱っていてretina対応も含まれているらしい。

<img src="/images/logo.png" data-interchange="[/images/logo@2x.png, (retina)]">

という感じかな。(ちゃんと実機で検証してない)

以下のフォーラムも参照するとよさげ。

Images, Interchange, and small Retina devices | Foundation Forum from ZURB
http://foundation.zurb.com/forum/posts/2594-images-interchange-and-small-retina-devices

感想など

・・・どちらも公式サイトをバリデーションするとちょっと残念な感じなんですが、最近はそういうものなのでしょうか。

Gumbyは「オレサマコード!どうだロックだろ!」みたいなイメージかなあ。ソースドーンと落としてぱっぱっと書き換えればいい感じなのがするっと出来る感じ。でもバリデに怒られる。嫌いじゃないというかむしろ好きだけれど、受託案件で使う気はしないです。でも、JSのライブラリとか色々とぱく・・・参考になりまくるソースがあるので美味しくいただきたいと思います。

Toggles & Switches
http://gumbyframework.com/docs/components/#!/toggles-switches

とか

Parallax
http://gumbyframework.com/docs/extensions/#!/parallax

とか美味しそうです。

Foundationは、さすが企業が作ってるって感じで痒いところに手が届く。デザインテンプレートも豊富でまだまだ成長する感じだから、ある程度時間をかけて勉強してもいいと思う。でも頼りすぎると自分がダメになる気がします。

Off Canvas
http://foundation.zurb.com/docs/components/offcanvas.html

ていうサイドバーのオンオフが出来るやつも入ってて便利です。

・・・で、私としてはHTML5 BoilerplateにFoundationをのっけて、Gumbyのエッセンスを所々に使う、のが良さそう。かなー。

CSSフレームワークGumbyとFoundationを触ってみた

第二子出産してる間に、こういうのをCSSフレームワークと呼ぶようになったんですね。CSSのフレームワークにしてはCSS以外の要素が多過ぎる気がしなくもない・・・。
まあどんなフレームワークも、実際に使うかどうか分からなくても、ちょっと触ってみるだけで有益なtipsが沢山得られるので少しだけでも触ってみるのが良いと思っています。
・・・とはいえ時間に限りもあるので、2つに絞って触ってみました。

Bootstrapより癖がない、との評が多い

Foundation
http://foundation.zurb.com/

と、カスタム前提で作られているという

Gumby
http://gumbyframework.com/

です。
それぞれ私目線で比べながら触ってみました。

1.ダウンロードとインストール

Gumbyはダウンロードボタンを押すと、ごっそり一式ダウンロードできてSassファイルも入っているのであとはCodekit(2が出てますね!まだチェックしてない!)に読み込ませるだけで良いのが気楽。

FoundationはSassを使いたければ、

Getting Started With Sass
http://foundation.zurb.com/docs/sass.html

に従ってコマンドラインでゴソゴソする必要があります。といっても数行なのですぐ終わります。

2. 基本の設定(CSS)

Gumbyはダウンロードする前に

Customize
http://gumbyframework.com/customize

でカスタマイズをしてからダウンロード出来ますが、どうせダウンロードしてからも弄るので

/sass/var/_settings.scss

の設定ファイルに慣れるのが早い気がします。

// Welcome to Gumby 2.0 Settings.
// Happy Tinkering!

// Grid Settings
$row-max-width: 940px !default;    				// 940px
$gutter-in-px: 20px !default;      				// 20px
$cols: 12 !default;              				// 12 Column Default Grid
$hybrid: 16 !default;							// 16 Column Default Hybrid Grid

// Responsiveness Settings
$min-device-width: 320px; 						// iPhone Portrait
$tablet-device-width: 768px;					// iPad Portrait
$document-width: $row-max-width;				// Default Document
$max-device-width: 2880px;						// Max Document Size

みたいな設定値がずらっとあるので該当箇所をいじってみると

css/style.css

に書きだされて

ui.html

に反映されるのでわかりやすいです。

Foundationも同じく、サイト上でカスタムしてからダウンロードできますが、
Sassで使う場合には上に書いた方法でインストールすると、

/scss/_settings.scss

というファイルがあってコメントを読みつつ必要な箇所をコメントアウトしてカスタムしていく感じです。すると

css/app.css

に圧縮して書き出されます。

・・・うーん、最初から圧縮して書き出すのはどうなの?最終的には圧縮するかも知れないけれども。
GumbyはConfig.rbすぐ見つかるから良いけれど、・・・!

とか思ったら私FoundationのほうをGrunt + Libsassとやらのほうで作ってたのでした。
ちゃんと読んで無いのバレバレだ・・・。

えーと、Compassのほうで作ると、
Sassファイル弄る前は該当のCSSは書き出されておらず、設定すると、

stylesheets/app.css

というファイルが生成されます。
しかもちゃんと圧縮されずに。。。

index.html

が反映先ですが、全部のパーツが見たかったら、

Kitchen sink
http://foundation.zurb.com/docs/components/kitchen_sink.html

をDLしてみるのが良いのかな。

3. HTMLとブラウザ対応

どちらも配布ソースでは、HTML5ながらdivタグのみ。

Gumbyはpaulirish.comのhtmlタグハックが付いてるけれど、

http://gumbyframework.com/docs/#!/browser-compatibility

IE8以上ということになってます。

Foundationはhtmlタグはまっさらながら

http://foundation.zurb.com/docs/v/2.2.1/qa.php

をみるとIE7以上なのかな。
でもどうやって個別対応するんだろうか・・・。

あと、GumbyにはSemantic Gridという手法もあって、
Sassのmixinを使ってCSS内で完結する感じが素敵。
(Foundationでもsectionなんかのタグは使えるけれど、classとかidとかは残念な感じのまま。)

・・・って書いてみたものの、2つともドキュメントが膨大過ぎて機能の半分も把握出来てない気が。
やっぱりもうちょっと実際の開発作業に突っ込んでみないと分からないので、いつ出るかわからない続報にご期待ください・・・。

CompassでSprite画像の書き出しをちょこっとカスタマイズ

Compassの大きな魅力のひとつ、Sprite画像の書き出し。
凄く素敵な機能ですが、
画像名からclass名が自動生成されちゃうのとかちょっとイヤなので、
もう少し私好みに出力してもらうためのカスタマイズ。

sprite/ 以下に対象のpng画像を入れておきます。
ここではimg_a.png、img_b.png、img_a_hover.png、img_b_hover.png、の4ファイルが入っている想定です。

$sprites: sprite-map("sprite/*.png");
$sprites-img:sprite-url($sprites);
@mixin sprite-background($name) {
 	height: image-height(sprite-file($sprites, $name));
 	width: image-width(sprite-file($sprites, $name));
 	background-position: sprite-position($sprites, $name);
}
@mixin sprite-background-pos($name) {
 	background-position: sprite-position($sprites, $name);
}

とmixinを書いて、
お目当てのところに

a {
    display: block;
    background-image: $sprites-img;
    &.class_a {
        @include sprite-background(img_a);
        &:hover {
            @include sprite-background-pos(img_a_hover);
        }
    }
    &.class_b {
        @include sprite-background(img_b);
        &:hover {
            @include sprite-background-pos(img_b_hover);
        }
    }
}

という感じに指定。
高さや幅も一定だったら、それもmixinに入れずに書くのが良いかも。

参照:

CSS Sprite Helpers for Compass | Compass Documentation
Compassでスプライト画象を高速に書き出す方法[to-R]