vue.jsとAxiosを使ってWP REST APIからタグを取得してみる

REST APIと私とvueと、みたいなのが流行っているらしいとは聞いていましたが、静的コンテンツまで生成出来るとか聞いて、ガタっとなりました。それ私がやりたいやつじゃん、と。GW最終日のネタに決定。

でもまあ、先ずはvueもREST APIも全然分からんので、取り敢えずWordPressからデータを取得するアレコレを触ってみたのでメモしておきます。

要るもの

  • vue.js — Javascriptのフレームワーク。たぶん。簡単簡単って書いてあるけど、まだ全然仲良くなれない。最近人気らしい。
  • axios.js — ブラウザとNode.jsのためのHTTPクライアント。かしこい。
  • wordpress — ディファクトスタンダードなCMS。腐れ縁。4.7から勝手にREST APIを出すようになってます。肥大化したCMSの起死回生なるか。

・・・これしか要らない、という意味では超簡単かも。コマンドラインも基本必要ない。

“vue.jsとAxiosを使ってWP REST APIからタグを取得してみる” の続きを読む

インラインSVGを出してくれるショートコード

SVGをインライン化出来たので、記事内とかでも使いやすいようにショートコード化してみました。

ひねりも何もありませんが、これでlogo.svgていうファイル名なら、

[svg]logo[/svg]

と書くと出力してくれます。

phpの中なら

echo do_shortcode( '[svg]logo[/svg]' );

で。

適切なwidthとheightをCSSで指定するのを忘れずに。

※ 記事内でSVGを使うケースがあるのか?という人には必要ないコードです。
SVGスプライトをnpm-scriptsで作ってみるを前提にしています。

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をローカルに設定する手順メモ” の続きを読む