【WordPressのスリム化計画その2】CSSとJSファイルの管理にnpm-scriptsを使おう

こんにちは、yumiです。

WordPressのスリム化計画その2、CSSとJSファイルの管理の続きです。

もうすっかりSASSとjshintが無いと生きていけない体になってしまったので、Wordpressでも使えるようにしてみました。(SASSもStylusに移行するべきかなあ・・・とも思い始めています。)
browserifyしたりminifyしたりしてファイルサイズを減らすスリム化です。

gulpを使った方法は結構出回っていると思うし、npm-scriptsを使ったやり方を書いてみます。

npm-scriptsってなあに?という話は

Grunt/Gulpで憔悴したおっさんの話 – MOL
とか
npm-scripts で Web フロントエンド開発を管理する – アカベコマイリ
なんかをご参照ください。

もちろん既に、

NPM Run WordPress – The Codestead

とか、npm-scriptsでWordpressを扱っているものはあるのですが、私的には単純にSASSファイルとJSファイルの監視と構文チェック、minifyが出来れば良いので自作してみました。

ディレクトリの構成はこんな感じ

myTemplate/
├ dev/
 ├ package.json
 ├ js/
 └ scss/
├ js/
 ├ main.js
 └ main.min.js
├ style.css
├ style.min.css
└ (その他お馴染みのwordpress関連ファイル)

で、package.jsonはこんな感じ

{
  "name": "myTemplate",
  "version": "0.1.0",
  "description": "sass compile, minmum etc.",
  "scripts": {
    "compile:sass": "node-sass --include-path scss scss/style.scss ../style.css",
    "minify:css": "node-sass --include-path scss scss/style.scss ../style.min.css --output-style compressed",
    "watch:css": "node-sass --include-path scss scss/style.scss ../style.css -w",
    "check:js": "jshint js/*.js",
    "watch:js": "watchify js/*.js -o ../js/main.js -v",
    "build:js": "npm run check:js && browserify js/*.js -o ../js/main.js",
    "minify:js": "uglifyjs ../js/main.js -m -c -o ../js/main.min.js",
    "release:js": "npm run check:js && npm run build:js && npm run minify:js",
    "build": "npm run compile:sass && npm run build:js",
    "watch": "npm run watch:css && npm run watch:js",
    "release": "npm run minify:css && npm run release:js",
    "reload": "browser-sync start --proxy 'local.test' --files '../**/*'"
  },
  "dependencies": {
    "browser-sync": "^2.18.8",
    "browserify": "^14.3.0",
    "jslint": "^0.10.3",
    "node-sass": "^4.5.2",
    "uglify-js": "^2.8.22",
    "watchify": "^3.9.0"
  }
}

で、

npm run watch

npm run build

して、出来上がったら

npm run release

して、先述のSCRIPT_DEBUGをfalseに設定する、という感じ。

一応、reloadとか作ってみているけれど、あんまり使わないのでbrowser-sync要らないかも。(ローカルテストは普通にVertual host使っています。)

まだ各モジュールで出来ることなどをちゃんと把握出来てなくて、微妙な気がしますが、取り敢えずこれで使ってみています。

改良したらまた記事にします。

【番外編】CSSだけのlightboxをwordpressにプラグイン無しで入れてみる

こんにちは、yumiです。

WordPressのスリム化というか、シンプルな雛形作りに挑戦中なのですが、いつもlightboxだけは最初から入ってて良いんじゃないかと思うのですよね。公式のテーマで対応していてもそろそろ良いんじゃないかと思うんですよ・・・。画像クリックして素の画像ファイルが表示される方がそろそろ予想外の動きになるのではないかと思うんです。

どうせ入れるならCSS3だけでできるlightboxにしたいなと思って、プラグインを探したら2年前で更新止まってて。CSS3だけのlightboxって流行ってないのかな。
というかスリム化目指してるのにプラグインあんまり入れたくないし、よし、いっちょ書いてみるか、とfunctions.phpとCSSで書いてみました。

function add_lightbox($content) {
    if ( preg_match('/<a href=.*?><img/', $content) ) {
        $lightbox_class_name = 'lightbox';
        preg_match_all('/<a href=\"(.*?)\".*?><img.*? class=\".*?wp-image-(.*?)\"(.*?)<\/a>/', $content,$matches);
        foreach ($matches[1] as $key => $value) {
            if(preg_match('/\.gif$|\.png$|\.jpg$|\.jpeg$|\.bmp$/i',$value)){
                $pattern = '/<a href=\"'.preg_quote($value,"/") .'\".*?><img.*? class=\".*?wp-image-(.*?)\"(.*?)<\/a>/';
                $content = preg_replace($pattern,'<a href="#wp-image-'.$matches[2][$key].'"><img class="wp-image-'.$matches[2][$key].'"'.$matches[3][$key].'</a><a href="#_" class="'.$lightbox_class_name.'" id="wp-image-'.$matches[2][$key].'"><img src="'.$matches[1][$key].'"></a>' ,$content);
            }
        }
    }
    return $content;
}
add_filter('the_content','add_lightbox');

というような、画像ファイルをリンク先に指定しているimgタグを探して書き換える処理をする関数を書いて、functions.phpに追加。

/* lightbox */
.lightbox {
/** Default lightbox to hidden */
display: none;

/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}

.lightbox:target {
/** Remove default browser outline */
outline: none;

/** Unhide lightbox **/
display: block;
}

という感じにCSSを書くと、lightboxぽく表示されます。

“【番外編】CSSだけのlightboxをwordpressにプラグイン無しで入れてみる”の続きを読む

【Twentyseventeenのちょこっとカスタマイズ】子テーマでAdsenseを好きな場所に貼り付けよう

こんにちは、みみです。

すっかり忘れていましたが、Google Adsenseの公式プラグインが今月でサポートを終了するのでした。今度やろうやろうと思いつつ、気がつけばGWになってしまいました。

基本的な移行の方法は公式を参照してください。公式ではQuickStartとやらを使う方法とカスタム AdSense 広告を使う方法が書かれています。

ここでは後者の、広告ユニットのソースを取得して貼り付ける方法を使います。サイドバーやフッター内ならWidgetsで簡単に貼り付けられますが、記事の直後とかだとテーマファイルを弄る必要があります。

他のプラグインを使う手もありますがせっかくなので子テーマを弄って好きな場所に広告を貼り付ける方法をご紹介しようと思います。(これは特にTwentyseventeenでないと出来ないことでは無いのですが、Twentyseventeenを使っている前提で書いています。)

といっても、要するに張りたい場所を探して、Adsenseのソースを貼り付けるだけなのですが、管理しやすいようにテンプレートパーツの機能を使って作りましょう。

先ず子テーマに

子テーマのディレクトリ/template-parts/adsense/

という感じでAdsense用のディレクトリを作ります。其の中に

for-single.php

というような名前のファイルを作って、Adsenseのソースを貼り付けて保存します。あとは好きな場所に読み込むだけです。

例えば、個別ページならsingle.phpを子テーマフォルダにコピーしてきて、

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

get_template_part( 'template-parts/post/content', get_post_format() );
//adsense
get_template_part( 'template-parts/adsense/for-single', get_post_format() );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

the_post_navigation( array(
'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
) );

endwhile; // End of the loop.
?>

こんな感じで読み込ませると、個別ページのコメントの上に表示されるようになります。
“【Twentyseventeenのちょこっとカスタマイズ】子テーマでAdsenseを好きな場所に貼り付けよう”の続きを読む

【WordPressのスリム化計画その2】CSSとJSファイルの管理 1

こんにちは、yumiです。

前回のヘッダーの中をきれいにしように続いて、WordPressのスリム化計画その2では、CSSとJSファイルのスリム化を目指したいと思います。

SCRIPT_DEBUG関数を使って、開発時とリリース時のファイルを分けたり、というお話です。

まず、CSSとJSの読み込みはfunctions.phpに一元化。

デバック時は圧縮してないstyle.cssを読み込み、本番時はstyle.min.cssを読み込みます。JavaScriptはmodernirの圧縮したものをヘッダーに、自作のmain.jsはフッダーに読み込むようになっています。

//css,jsの読み込み
function myTemplate_scripts() {
    //デバックでも本番でも読み込むもの
    wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/vender/modernizr-2.8.3.min.js', array(),'2.8.3',false);

    //デバック時と本番で切り替えるもの
    if(SCRIPT_DEBUG) {
        //css
        wp_enqueue_style( 'myTemplate-style', get_stylesheet_uri(), false, filemtime( get_stylesheet_directory() . '/style.css') );
        //js
        wp_enqueue_script( 'myTemplate-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
    } else {
        //css
        wp_enqueue_style('myTemplate-style', get_stylesheet_directory_uri() . '/style.min.css' );
        //js
        wp_enqueue_script( 'myTemplate-script', get_template_directory_uri() . '/js/main.min.js', array(), '1.0.0', true);
    }
}
add_action( 'wp_enqueue_scripts', 'myTemplate_scripts' );

そして、wp-config.phpに

define( 'SCRIPT_DEBUG', true );

を書き加えておくと、

<link rel='stylesheet' id='myTemplate-style-css' href='http://yoursite.com/wp-content/themes/myTemplate/style.css?ver=1493820564' type='text/css' media='all' />
<script type='text/javascript' src='http://yoursite.com/wp-content/themes/myTemplate/js/vender/modernizr-2.8.3.min.js?ver=2.8.3'></script>

がヘッダーに

<script type='text/javascript' src='http://yoursite.com/wp-content/themes/myTemplate/js/main.js?ver=1.0.0'></script>

がbodyタグ前に入ります。

SCRIPT_DEBUGがfalse(本番環境)なら

<link rel='stylesheet' id='myTemplate-style-css'  href='http://local.test/gulped_wordpress/wp-content/themes/myTemplate/style.min.css?ver=4.7.3' type='text/css' media='all' />
<script type='text/javascript' src='http://local.test/gulped_wordpress/wp-content/themes/myTemplate/js/vender/modernizr-2.8.3.min.js?ver=2.8.3'></script>

に変わります。
“【WordPressのスリム化計画その2】CSSとJSファイルの管理 1″の続きを読む

【Twenty Seventeenのちょこっと解説】バージョン1.2の変更点

こんにちは、yumiです。

WordPressの復習に手間取っている間に、Twenty Seventeenがバージョンアップしたようです。

今まではテーマのバージョンアップなんて全然気にせず何のバックアップも取らずに(!)アップデートしていたのですが、子テーマを使っていると流石にリリースノートをチェックしてみようという気になりますね。

リリースノートはこちら
https://codex.wordpress.org/Twenty_Seventeen_Theme_Changelog#Version_1.2

Declare jQuery dependency for navigation.js. (#40224)
Correctly escape translatable strings in HTML attributes. (#40216)
Fix incorrect heading hierarchy for front page posts. (#40264)

ヘッダータグの階層を修正とか普通にしてあった・・・。確かに変だなと思ったけれど・・・。

ヘッダータグのCSSをカスタムしているケースは結構あるのではなかろうか。こういうところもアップデートされるならば、ローカルテスト必須だなあ。

実際の差分はこちら
https://themes.trac.wordpress.org/changeset?old_path=twentyseventeen/1.1&new_path=twentyseventeen/1.2

つまり、トップページのエントリーのタイトルタグをh3タグに変更しているようですね。

・・・そこは気にするんだ?って思っちゃうけれど、より良いソースになるのは良いことだと唱えつつ、粛々と子テーマを修正しましょう(私は何も修正していませんが)。 “【Twenty Seventeenのちょこっと解説】バージョン1.2の変更点”の続きを読む

【WordPressの基礎】テーマにウィジェットを追加する「ウィジェットかサイドバーかそれが問題だ」

こんにちは、yumiです。

昨日に引き続き、プレーンなwordpress作りにチャレンジしているのですが、ウィジェット周りの設定方法を気持ちいいくらい忘れていたので、復習がてら書いておきます。

まず、ウィジェットを追加するサイドバーを作ってあげるためにfunctions.phpにwidgets_initを追加します。

//widgetsの設定
function my_widgets_init() {

	register_sidebar( array(
		'name' => 'main sidebar',
		'id' => 'main_sidebar',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	) );

	register_sidebar( array(
		'name' => 'sub sidebar',
		'id' => 'sub_sidebar',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	) );
}
add_action( 'widgets_init', 'my_widgets_init' );

こんな感じで、複数でもサイドバーを追加できます。
追加したら、管理メニューの外観に「ウィジェット」が表示されるはずなので、普通に必要なウィジェットをドラックドロップしましょう。

メニューの3番目に「ウィジェット」が入ります。

実際にサイトにウィジェット(サイドバー)を反映させるには、sidebar.phpなどに

<?php if ( is_active_sidebar( 'main_sidebar' ) ) : ?>
<div id="main_sidebar">
	<?php dynamic_sidebar( 'main_sidebar' ); ?>
</div>
<?php endif; ?>
<?php if ( is_active_sidebar( 'sub_sidebar' ) ) : ?>
<div id="sub_sidebar">
	<?php dynamic_sidebar( 'sub_sidebar' ); ?>
</div>
<?php endif; ?>

という風にdynamic_sidebar関数によってregister_sidebarで付けたidで呼び出します。
“【WordPressの基礎】テーマにウィジェットを追加する「ウィジェットかサイドバーかそれが問題だ」”の続きを読む

【WordPressのスリム化計画その1】ヘッダーの中を綺麗にしよう

こんにちは、yumiです。
仕事が一段落したらブログも一段落してしまいました。すっかり春ですね。心機一転、Wordpressのスリム化計画と題して書いていきたいと思います。

というのも久々にWordpressのプレーンな状態を作ろうとイチからテーマを作っていたら、デフォルトで色んなものを突っ込んでいたり、はたまた必要なものが無かったりしたのでその辺をメモしておきたいなあと。

先ずはheadタグの中を軽くお掃除したいと思います。

generatorは前からあったけれど、emojiタグなんてものも突っ込まれるようになったのですね・・・。
あと管理バーも最初からオフにしておきたいし、タイトルタグの自動生成も何処にいったかなと思ったらfunction.phpに移動してる・・・。

という訳で、fucntions.phpに以下を記述してあげるとemoji関連の記述が減って、headタグ内がちょっとスッキリしてくれます。

(もちろん、絵文字をサイトで使うという方はそのままにしておいてくださいね。)

function disable_emoji() {
     remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
     remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
     remove_action( 'wp_print_styles', 'print_emoji_styles' );
     remove_action( 'admin_print_styles', 'print_emoji_styles' );
     remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
     remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
     remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
     add_filter( 'emoji_svg_url', '__return_false' );
}
add_action( 'init', 'disable_emoji' );

generatorを消したければ

remove_action( 'wp_head', 'wp_generator' );

管理バーを消したければ

add_filter( 'show_admin_bar', '__return_false' );

を追記してください。

あとは、普通にテーマを使っていれば入っているはずですが、タイトルタグは

add_theme_support( 'title-tag' );

で自動生成されていますので、funtions.phpから消さないこと。

“【WordPressのスリム化計画その1】ヘッダーの中を綺麗にしよう”の続きを読む