WordBench三鷹@ミタカフェにて所感

WordBench三鷹@ミタカフェに参加してきました。土曜日開催の勉強会、しかも近所ってほんと有難い!隔月で開催されるそうで、早速次回も参加表明してきました。LT枠で(!)。

会った人たちにPHPカンファレンス2009とWordCampがーって言いまくってたけれど、WordPressのブースがあっただけかもしれない。10年弱前の事ってことでお許しください。

ブロガーになりたい人が結構いることとか、10年でWordPressの認知度がこんなに変わっていて、ブログって何?美味しいの?っていう時代からやってる身としては何とも感慨深い集まりでした。

私的には、グーテンベルグとGoogleの動向が知りたかったんだけれど、そんな事より一般ユーザーとブロガーに会えて、彼らのニーズが全然違う事を知れて凄く面白かった。

仕事としてWordPressを使う時には、要らないものを剥ぎ取ってコアだけ残した自作テーマから構築していくし、なるべくプラグイン使わないようにするし、サイズダウンとスピードアップに注力して作ります。最早必要としているのはWordPressを使っているというお題目だけだったり、管理UIの見慣れ感だけだったりするわけです。なんでこれをWordPressで?っていう案件も増えてきました。

だから、WordPressが外側だけどんどんリッチになっていくのを少し面倒くさいように思っていたのです。

でも、世間のニーズとしてはグーテンベルグが正しいのかもなあ。と。同時に開発者としてはWordPressからの脱却を考えるべきなのかなあ、とかも。まあしばらくは無理でしょうけれど。

次回のLTで、CSSのいろはを話すべきか、npm-scriptsを使ったSASSの導入を話すべきか、迷っています。それとも、オススメのテーマ、とかの方が良いのかな。個人的には最新公式テーマのTwenty Seventeen最強説を唱えたいのだけれども。

まあ、医者の不養生で、このサイトもロクに手入れをしていないので、こんな人がアレコレ言っても信じてもらえないかも知れませんが。ぎゅんぎゅん動きまくるように改築しようかな。

それと、ミタカフェの、気取らなくってお菓子が沢山あって落ち着く感じも気に入りました。MBPの環境整えたからリモートも可能になったし、今度またお邪魔してみたいと思います。

あと、名刺入れちゃんとしたの探そう。

【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。

こんにちは、みみです。

そういえばそろそろTwenty Eighteenまだ出ないのかなーとか思ってたら、Twenty Seventeenの1.5がリリースされていました。

Twenty Seventeen Theme Changelog « WordPress Codex
https://codex.wordpress.org/Twenty_Seventeen_Theme_Changelog#Version_1.5

Various code improvements for formatting. (#41057)
Use consistent wording when referring to the front page in inline docs. (#42666)
Correct the number of recent posts in a comment in template-parts/page/content-front-page-panels.php. (#42621)
Remove unnecessary comment in front-page.php. (#42820)Underline links in comments. (#43317)

ということで大した変更はなさそうですが、そもそも1.3と1.4のリリース見逃してたよね・・・。特に大事がなくてほんとに良かった・・・。


“【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。” の続きを読む

【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で読み込ませる” の続きを読む

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

こんにちは、mimiです。

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にプラグイン無しで入れてみる” の続きを読む