カスタマイズ 2019年5月24日 JavaScriptでウィジェットエリアHTMLを取得するには ワードプレスをヘッドレスで使用することを想定すると、フロントエンド側で困るのはウィジェットな気がします。 ポストメタなどは登録の際にRESTを有効化させることもできますし、プラグインACFと合わせてRESTで取得できるプ... Read More
カスタマイズ 2019年5月12日 独自のアップデートチェッカーを作成する際、更新用のZIPファイルにおける注意点 以前、アップデートチェッカーを作成する方法を書いたことがあるのですが、そういえばZIPファイルについて書いていなかったのでちょっと追記するような形で書いておきます。 関連記事：テーマやプラグインに独自のアップデートチェッ... Read More
カスタマイズ 2019年4月23日 Gutenberg カスタムブロックの追加方法の具体例：「Map」 以前Gutenbergのカスタムブロックの追加方法を紹介しましたが、今回は具体例と一緒に解説です。 先に解説に役立つ知識として以下の記事を書いていますので、その紹介をしておきます。 ワードプレスのエディター「Gutenb... Read More
コラム 2019年4月20日 ワードプレスでのPWA対応にはプラグイン「Super Progressive Web Apps」 AMPもSSLもそうですが、簡易的なPWAもリポジトリからインストールできるプラグインで対応させてしまうことができます。 Service WorkerというJavaScriptのAPIを使用することが前提条件ですので、P... Read More
カスタマイズ 2019年4月17日 メインクエリでループするブログページなどをエディタで編集可能にするには？ ブログページなどをエディタで編集可能にするのは、ちょっと面倒なカスタマイズかもしれません。 ワードプレスにはフロントエンドの基本的なページの種類として以下のような形になっています。 ホーム（「設定」->「表示設定」... Read More
カスタマイズ 2019年4月13日 文字毎に簡単なエフェクトを追加する方法 – No jQuery テーマで簡単に設定できるようにテキストのエフェクトを追加できるようにしようと、試しでとりあえずこんな感じのエフェクトを１つ作成しましたので、備忘録として文字毎にエフェクトを与える方法を書いておきます。 jQueryだとプ... Read More
カスタマイズ 2019年4月8日 jQuery不要の便利なスライダー「Swiper」の使い方 テーマ「Ace」で採用しているスライダーライブラリについての紹介です。 この例はテーマ「Ace」でのスライダー機能で作成したデモですが、このようにネスト化して複数のエフェクトを同時に使用することもできます。 ３Dエフェク... Read More
カスタマイズ 2019年4月5日 ナビメニューに編集項目を追加する方法 ちょっとだけ厄介なカスタマイズについてです。 ナビメニューの設定項目を自由に編集したいと思った方もいるでしょう。 ただ、探せどフロントエンド側で詳細を追加するなどの処理を加えてサポートすることは可能ですが、管理画面での編... Read More
チュートリアル 2019年4月4日 JavaScriptでページコンテンツに目次を挿入する方法 ワードプレスのコンテンツページにおいて、目次を出力するのに「Table of Contents Plus」などを使っている人が多くいらっしゃると思いますが、目次って実は結構簡単に作成出来ちゃいます。 JavaScript... Read More
コラム 2019年4月4日 グーテンベルグでフィルター「wpautop」って必要？ クラシックエディタでも同様の問題があったのですが、グーテンベルグでも同様のフィルターが機能していることに少し驚いた話です。 ブロック単位でコンテンツを編集することができるようになってから、正直「autop」が消えていると... Read More
コラム 2019年4月1日 カスタムブロックのAttributesにはobjectタイプが存在しないらしい。 カスタムブロックを作成する際、値を保存する時に気を付ける点についてです。 タイトルにもあるように、カスタムブロックの作成に関する話ですので、カスタムブロックの作成方法をご存知でない場合は先にそちらの記事をご参照ください。... Read More
コラム 2019年3月27日 Gutenbergのカスタムブロック作成でimgを使う際にハマった件 コアな部分には詳しくないので何とも原因がよく分からないんですが、CTA用の簡単なブロック追加をしている時に少しハマった話です。 問題となったのが、JSXで書いてある次の２種類のコードです。 両方同じようにimgを使って同... Read More
カスタマイズ 2019年3月21日 WordPressでアイコンを利用する際に便利な下処理 Webページでアイコンを利用する機会は結構あると思いますが、テーマ「Ace」で取り入れている「Material Design Icons（MDI）」を例に挙げて、使い方をさらっと紹介いたします。 ウェブフォントとしてのM... Read More
カスタマイズ 2019年3月18日 レイアウトブロックを追加してGutenbergをページビルダーにカスタマイズする方法 WordPressのコンテンツページを追加する際の投稿用エディターとして使われているGutenbergですが、いくつかブロックを追加している内に、これでページ全体を作成できちゃうことに気づいてしまいます。 それはもうペー... Read More
チュートリアル 2019年3月15日 WordPressをマルチサイト化する方法 ショップを併設する際にこのサイトをマルチサイト化しましたので、それと同時に今更ながらWordPressのマルチサイト化に関する話題を紹介いたします。 マルチサイト化させることをお考えでしたら、こちらで当ブログの事例と合わ... Read More
チュートリアル 2019年3月8日 Webpackの圧縮プラグインには「terser-webpack-plugin」 開発環境でJavaScriptを編集する際は別に問題ないのですが、Webpackで生成したファイルはサイズが結構大きくなってしまう場合がありませんか？ また、確認の際によく使用されるコンソールメソッドがありますが、これら... Read More
チュートリアル 2019年3月5日 ワードプレスのエディタGutenbergのカスタムブロック用にJSXを変換する方法 – WebpackとBabel 以前紹介したGutenbergにブロックを追加する方法に関連する、JSXとその変換方法に少し触れておきます。 「ワードプレスのエディター「Gutenberg」にカスタムブロックを追加する方法」で紹介した方法と実際にブロッ... Read More
チュートリアル 2019年3月4日 初めてのWebpack – インストールと使用方法 Webpackを僕の言葉で簡潔に説明すると、パッケージ内で使用するリソースファイルをトランスパイル処理などを施しながら一括して処理し、１つのJavaScriptファイルに纏めてしまうことが出来るツールです。ざっくりとした... Read More
