WordPress

WordPress + Nuxt.js でポートフォリオサイトを作る その13

WordPressサイト(https://works-wp.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その13 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works.yuheijotaki.dev/ 高速化/最適化 Chorme の Audits …

WordPress + Nuxt.js でポートフォリオサイトを作る その12

WordPressサイト(https://works-wp.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その12 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works.yuheijotaki.dev/ ドメイン紐付け コンテンツ登録や調…

WordPress + Nuxt.js でポートフォリオサイトを作る その11

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その11 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Google Analyticsの追加 Google…

WordPress + Nuxt.js でポートフォリオサイトを作る その10

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その10 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ meta 設定 トップと詳細で出力…

WordPress + Nuxt.js でポートフォリオサイトを作る その9

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その9 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Pugで v-if Pugで v-if を使う <template lang="pug"> </template>…

WordPress + Nuxt.js でポートフォリオサイトを作る その8

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その8 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ dataで取得したカラーコードをcs…

WordPress + Nuxt.js でポートフォリオサイトを作る その7

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その7 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ 外部リソースの(インストールし…

WordPress + Nuxt.js でポートフォリオサイトを作る その6

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その6 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ 前回から1ヶ月ほど空いてしまい…

WordPress + Nuxt.js でポートフォリオサイトを作る その5

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その5 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Pug と Nuxt.js(Vue.js) はじめ…

WordPress + Nuxt.js でポートフォリオサイトを作る その4

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その4 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Netlify にデプロイ Netlifyのサ…

WordPress + Nuxt.js でポートフォリオサイトを作る その3

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その3 GitHub: https://github.com/yuheijotaki/works-nuxt 作業フォルダを src/階層にまとめる nuxt.config.js に export default { ... srcDi…

WordPress + Nuxt.js でポートフォリオサイトを作る その2

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その2 GitHub: https://github.com/yuheijotaki/works-nuxt クリックイベントと $emit / props コンポーネント名を Filter.vue にしようと思っ…

WordPress + Nuxt.js でポートフォリオサイトを作る その1

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その1 GitHub: https://github.com/yuheijotaki/works-nuxt サイト構成 下記のシンプルな構成で行う トップページ (/) Works一覧(クリックで詳…

WordPress に Vue.js を スモールスタートで入れてみる その7

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その7 最後は細かいテクニック的なところについて ローディング API から投稿データ取得するまでローディング、取得後に解除する DOM更新後にローディング解除したいので $nextTick…

WordPress に Vue.js を スモールスタートで入れてみる その6

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その6 今回はPhotoSwipeのvueモジュールについて v-photoswipe バニラJSのフォトギャラリープラグイン PhotoSwipe スワイプなど、スマホの各アクションにも対応しているのでlightbo…

WordPress に Vue.js を スモールスタートで入れてみる その5

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その5 今回はモジュールについて Isotope レンガ式のレイアウトをするためにnpmモジュールがいろいろあります。 vue-masonry を最初使ってましたが、実行タイミングが早かったり、v…

WordPress に Vue.js を スモールスタートで入れてみる その4

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その4 今回は記事ページでの情報取得について 詳細ページで記事情報のAPIにアクセス テンプレートファイル側(.php)で投稿IDを取得して変数 POST_ID に格納しておく SAMPLE-POSTTY…

WordPress に Vue.js を スモールスタートで入れてみる その3

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その3 今回はACFオプションページのリピーターフィールドについて ACF オプションページ リピーターフィールドの取得・出力 カスタムフィールドは、 sample_field(繰り返しフィー…

WordPress に Vue.js を スモールスタートで入れてみる その2

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その2 基本構造 WordPress の各テンプレートファイルからVue.jsを呼び込む トップページの場合、 homeGallery.vue には Vue ( <template> と <script> ) を書いていく感じ。 ▼ app.js import Vue from</template>…

WordPress に Vue.js を スモールスタートで入れてみる その1

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことをまとめようと思ったのですが、年内公開も怪しくなってきたので今の段階でメモしておこうとおもいます。 概要 WordPress を使った既存サイトがあり、リニューアル版は WordPress を残しつ…

Shifter をさわってみた

WordPress の静的ホスティングサービス Shifter を検証で触ったのでメモしておきます。 今回採用には至らず、無料プランで試した範囲の内容です。 概要 WordPress の静的ホスティングサービスってなんだろと思ってましたがざっくり Shifter の特長として認識…

カスタム投稿 REST APIで取得するJSONを並び替えプラグイン通りにする

https://siteUrl.com/wp-json/wp/v2/POST-TYPE-NAME/ のREST APIを叩くと順番がデフォルト(投稿日順?)になってしまうので、これを並び替えプラグイン通りに並べ替えたい。 ぴったしの記事がありました Intuitive Custom Post Orderの並び順をWP-REST-API…

ACF オプションページのREST APIエンドポイント

ACFオプションページのエンドポイントがうまくいかなかったのでメモ 公式ドキュメント: https://github.com/airesvsg/acf-to-rest-api 同じようなissue: https://github.com/airesvsg/acf-to-rest-api/issues/184 登録はfunctions.phpに通常通り記述 '…

REST API のスキーマにリピーターフィールドの画像データを格納する

ACF to REST API を使えば REST API でACFの値が取得できますが、カスタマイズした形でカスタムフィールドの値を追加する方法です。 例えばACFフィールドでアップロードした画像は指定している戻り値がREST APIでも返ってきます。 image_field: リピーターの…

WordPress + Nuxt.js で スラッグベースのパーマリンクにルーティングする

ルーティングする という表現があっているのかどうか微妙ですが、 カスタム投稿タイプを使ったWordPressの投稿をIDベースではなくスラッグベースで実装する場合 カスタム投稿: book .vue ファイル名: /pages/book/_slug.vue 実現したいURL構造: https://hoge…

【PHP】変数名に変数の値を代入する

$array = [ 'name01' => 'Taro', 'name02' => 'Hanako', 'name03' => 'Jiro' ]; という配列があって、 $targetName = 'Hanako'; のように、宣言した変数の値 Hanako とオブジェクトの値がマッチする場合を判定し、 $name02 = true; という変数を作りたい場合…

【WordPress】詰まったこと、使ったこと その1

最近 WordPress で詰まったこと、使ったことをメモしておきます。 page.php で pre_get_posts のクエリ書き換えがうまくいかない 固定ページである投稿タイプの一覧出して、ページ送りも実装して、としたかったのですが、仕様的に難しそう。 pre_get_posts …

【WordPress】Gutenberg 参考にしたリンクと所感

案件で初めて WordPress5.x 以降を触わり、Gutenberg に対応する際に参考にしたサイトをメモしておきます。 【WordPress】Gutenberg 周りの情報まとめ(随時更新) - Qiita 包括的にまとまっているのはこちらでした。 【2018 年最新版】Gutenberg の使い方!…