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

こんにちは、mimiです。

WordPressのスリム化計画その2、CSSとJSファイルの管理の続きです。(その1はこちらから

もうすっかり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が出来れば良いので自作してみました。

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

Twentyseventeenのバグ?アップデートでタグクラウドが変

こんにちは、みみです。

さっきアップデートしたせいだと思いたいんですが、タグクラウドの表示がおかしくなってて、上のスクリーンショットみたいになっちゃったんですが、

.widget ul li,
.widget ol li {
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	padding: 0.5em 0;
}

この辺が悪さをしているみたいなので、取り敢えず

.widget ul.wp-tag-cloud li,
.widget ol.wp-tag-cloud li {
	border:0;
	padding: 0;
}

と追加CSSに書き加えておきました。

でもググっても同じような症状の人見当たらない?のでうちだけかしら・・・。
アップデートしたら見回りしないとだめですねー。

新しいWordPressをローカルに設定する手順メモ

あけましておめでとうございます、mimiです。

久々にWordpressをローカルに設定しようとしたらスコンと手順を忘れていたのでメモしておきたいと思います。viとかこういう時にしか使わないので忘れちゃって毎回ぐぐってしまうのです…。

(ApacheとMySQL、phpMyAdminがインストールされている環境を前提としてます。最初の環境づくりの流れはiMacの開発環境を参照してください。)

1. 任意のディレクトリに最新のWordpressをダウンロードして展開。

ここでは/Users/somebody/Sites/www/newSiteというディレクトリとします。

ダウンロード

“新しいWordPressをローカルに設定する手順メモ” の続きを読む

【WordPressの痒いところ】自分好みのjQueryをwp_enqueue_scriptで読み込ませる

こんにちは、mimiです。

【WordPressのスリム化計画その2】CSSとJSファイルの管理 1でも書きましたが、function.phpでJSとCSSの管理をしています。

が、WordpressではWordPress に含まれ登録されているデフォルトスクリプトというのがあって、勝手に色々読み込んでくれるのですが、大抵ウザいと思うので、自分好みのスクリプトを読み込ませる方法をご紹介しておきます。

力技では色々できますが、ここではwp_enqueue_script関数を使って読み込ませる方法を。といってもちょう単純です。

function.phpに

wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/vender/jquery-1.12.0.js', array(), '1.12.0', true);

と書いても、jqueryのハンドルに反応してデフォルトスクリプトの方を読み込んでくれてしまうので、

wp_enqueue_script( 'jquerymine', get_template_directory_uri() . '/js/vender/jquery-1.12.0.js', array(), '1.12.0', true);

というふうに、ハンドルを適当に変更すればOKです。

Googleから呼び出すならこんな感じで。

wp_enqueue_script( 'jquerygoogle', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', array(), '3.2.1', true);

他のライブラリでも同じ感じで読み込めるのでお試しあれ。

“【WordPressの痒いところ】自分好みのjQueryをwp_enqueue_scriptで読み込ませる” の続きを読む

【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

こんにちは、mimiです。

前回のヘッダーの中をきれいにしように続いて、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の変更点

こんにちは、mimiです。

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の変更点” の続きを読む