[{"data":1,"prerenderedAt":324},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f34yha2ec7wsfw":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":266,"title":267,"date":268,"excerpt":269,"image":270,"categories":271,"modified":273,"html":274,"tags":275,"related":287,"prev":313,"next":316},"create-wordpress-theme-with-vuetify","WordPressのテーマをVuetifyで作る","2020-11-20T12:16:06","最近Vue.jsが楽しくて仕方がない。WordPressのサイト開発にもVue.js使っている今日この頃だ。今時のWordPressと云えばReactなのだが、どうもReactには私的に嫌悪感が付きまとうのだ……なぜだ…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fwp-vuetify-theme-hw.png",[272],{"slug":74,"name":75},"2021-02-03T20:17:16","\u003Cp>　最近Vue.jsが楽しくて仕方がない。WordPressのサイト開発にもVue.js使っている今日この頃だ。今時のWordPressと云えばReactなのだが、どうもReactには私的に嫌悪感が付きまとうのだ……なぜだろう（うーん、公式ドキュメントが悪いんだろうか……Reactっていちいちわかりづらい書き方してる感じが……）。\u003Cbr \u002F>\n　ま、そんな個人的嗜好性もあって、特にVuetify使ってWEBサイト作るのが自分的に生産性抜群なのだ。ちゅーわけで、何度かVuetifyでWordPressのテーマを作ったので、その知見をナレッジ化していこうと思った次第だ。\u003C\u002Fp>\n\u003Ch2>初期設定\u003C\u002Fh2>\n\u003Cp>テーマディレクトリに、WordPressテーマとしてVueのプロジェクトを追加する。\u003Cbr \u002F>\n※VuetifyはまだVue 3に対応していないので、Vue 2のプリセット（\u003Ccode>Default ([Vue 2]...)\u003C\u002Fcode>）を選択する必要がある。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> {WORDPRESS_THEME_DIR}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">vue\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> create\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> vuetify-theme\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Please pick a preset: Default ([Vue 2] babel, eslint)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>VueプロジェクトにVuetifyを追加する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> vuetify-theme\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">vue\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> vuetify\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Choose a preset: Default (\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">recommended\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Nuxt.jsを使う場合\u003C\u002Fh2>\n\u003Cp>ページ遷移型のサイトを構築する場合や、特に投稿コンテンツを閲覧者毎に出しわける等の処理が必要でなく静的なHTMLとして高速配信したい場合などは、SSR（サーバーサイドレンダリング）が利用できるNuxt.jsをインストールするのが便利だ。\u003Cbr \u002F>\nNuxt.jsのインストールは下記のようになる。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> @nuxtjs\u002Fvuetify\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -D\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">vim\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> nuxt.config.js\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>設定ファイル:nuxt.config.js\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  buidModules\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    '@nuxtjs\u002Fvuetify'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    [\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'@nuxtjs\u002Fvuetify'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">      \u002F* options *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  ]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>VuetifyテーマでNuxt.jsを利用したテーマ開発については、別の機会に解説しようと思う。\u003C\u002Fp>\n\u003Ch2>Webpackを使う場合\u003C\u002Fh2>\n\u003Cp>Vuetifyテーマでビルドされるリソース群をWebpackでバンドルすることで、WordPressテーマ上でのアセット読み込みを最適化することができる。\u003Cbr \u002F>\nWebpackをインストールする場合は下記の手順を実施しよう。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> vuetify\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> sass\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> sass-loader\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> deepmerge\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -D\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">vim\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> webpack.config.js\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>設定ファイル:webpack.config.js\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">module\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">exports\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  module: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    rules: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        test:\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">\\s\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">(c\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">|\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">a)ss\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">$\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        use: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'vue-style-loader'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'css-loader'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            loader: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'sass-loader'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            options: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              implementation: \u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">require\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'sass'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              indentedSyntax: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            options: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              implementation: \u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">require\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'sass'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              sassOptions: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                indentedSyntax: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        ]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    ]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>VuetifyテーマでWebpackを利用してバンドルビルドする方法は、別の機会に解説しようと思う。\u003C\u002Fp>\n\u003Ch2>その他の設定\u003C\u002Fh2>\n\u003Cp>Vuetify用プラグインファイルを更新する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">vim\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> src\u002Fplugins\u002Fvuetify.js\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>中身は以下の通り。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Vue \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Vuetify \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'vuetify\u002Flib'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">Vue.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">use\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(Vuetify)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> opts\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> Vuetify\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(opts)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>以上で、Vue+Vuetifyの導入が完了だ。\u003Cbr \u002F>\nまずは動作確認をする。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> serve\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>ブラウザでlocalhost:8080にアクセスしてページが表示されればOKだ。\u003C\u002Fp>\n\u003Ch2>WordPressテーマとしての設定\u003C\u002Fh2>\n\u003Cp>次に、WordPressのテーマ用に必要なファイルを作成する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">touch\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> style.css\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">touch\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> screenshot.png\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">touch\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> functions.php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">cp\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> public\u002Findex.html\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> index.php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>screenshot.png\u003C\u002Fcode>はWordPressのテーマ管理ページで表示されるサムネイル画像となる。特になくても問題ないので、今回はファイルだけ作って中身は空としておく。\u003Cbr \u002F>\nその他の作成した各ファイルの中身の例は、下記の通りだ。\u003C\u002Fp>\n\u003Cp>style.css（WordPressテーマのシグネチャー兼メインのスタイルシート）\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">\u002F*\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">Theme Name: WordPress Vuetify Theme\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">Text Domain: wpvt\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">Version: 0.1.0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">Description: WordPress theme that built by Vue.js with Vuetify.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">Tags: blog\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">Author: YOUR_NAME\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">License: GNU General Public License v2 or later\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">License URI: http:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fgpl-2.0.html\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">*\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>コピーして来たindex.htmlは、下記のようにWordPressのテーマ用のディスパッチャ・ファイルとしてPHPソースに書き換える。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">\u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"> * Base Template: index.php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">?><!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">DOCTYPE\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> html\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">html\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> <?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> language_attributes\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?>>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">head\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">meta\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> charset\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"<?php bloginfo( 'charset' ) ?>\"\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">meta\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> http\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">equiv\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"X-UA-Compatible\"\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> content\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"IE=edge\"\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">meta\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> name\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"viewport\"\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> content\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"width=device-width,initial-scale=1.0\"\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> wp_head\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">head\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">body\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> <?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> body_class\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?>>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">noscript\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">strong\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> _e\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'wpvt'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">strong\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">noscript\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">div\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"app\"\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">div\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> wp_footer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">body\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">html\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>functions.php\u003C\u002Fcode>にVuetifyテーマ用の処理を追加する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">\u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"> * Custom Theme Functions: functions.php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">add_theme_support\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'title-tag'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">define\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'DIST_DIR_PATH'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get_template_directory\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u002Fdist'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">define\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'DIST_DIR_URL'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get_template_directory_uri\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u002Fdist'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> get_assets\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $search_path, $extension \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $assets \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> empty\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $search_path ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> is_dir\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $search_path ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( $dh \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> opendir\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $search_path ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            while\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( ( $file \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> readdir\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $dh ) ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!==\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">filetype\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $search_path \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'\u002F'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $file ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!==\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'dir'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                    $finfo \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> \\SplFileInfo\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $search_path \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'\u002F'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $file );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                    $_ext \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $finfo\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">getExtension\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">empty\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $extension ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">||\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_ext \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> strtolower\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $extension ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                        $assets[] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [ \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'filename'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $finfo\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">getFilename\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(), \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'extension'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_ext ];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            closedir\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $dh );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $assets;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">add_action\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'wp_enqueue_scripts'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Enqueue Styles\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    wp_enqueue_style\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'font-roboto'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:100,300,400,500,700,900'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, [], \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    wp_enqueue_style\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'md-icons'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@mdi\u002Ffont@latest\u002Fcss\u002Fmaterialdesignicons.min.css'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, [], \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> empty\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $css_files \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> get_assets\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">DIST_DIR_PATH\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u002Fcss'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'css'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $handle_name \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'chunk-vendors'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        foreach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">preg_grep\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"@{\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">$handle_name\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">}@\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">array_column\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $css_files, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'filename'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_filename ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            wp_enqueue_style\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $handle_name, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">DIST_DIR_URL\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">css\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\u002F'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_filename, [], \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Enqueue Scrips\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> empty\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $js_files \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> get_assets\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">DIST_DIR_PATH\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u002Fjs'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'js'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $handle_name \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'chunk-vendors'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        foreach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">preg_grep\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"@(chunk-vendors|app)@\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">array_column\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $js_files, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'filename'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_filename ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            $handle_name \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> substr\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_filename, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">strpos\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_filename, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'.'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            $depend \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $handle_name \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'app'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [ \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'chunk-vendors'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            wp_enqueue_script\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $handle_name, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">DIST_DIR_URL\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">js\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\u002F'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_filename, $depend, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>バンドルビルドされるjsやcssを走査して自動で読み込む処理を \u003Ccode>wp_enqueue_scripts\u003C\u002Fcode> アクションフックに持たせるのがミソだ。これで、チェックサム値が付与されたビルド済みファイルを読み込んでWordPressにテーマを適用してくれるようになる。\u003C\u002Fp>\n\u003Cp>これで、基本的な準備はOKだ。\u003C\u002Fp>\n\u003Cp>WordPressの管理画面にログインして、テーマを「WordPress Vuetify Theme」に変更しよう。\u003Cbr \u002F>\nその後、Vueアプリをビルドする。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> build\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>ビルドが完了したら、ブラウザで表示を確認してみよう。\u003C\u002Fp>\n\u003Cp>中央のVuetifyのロゴ画像が表示されないものの、ビルドされたページは表示されるはずだ。\u003C\u002Fp>\n\u003Ch2>Vuetifyビルド後のリソースパスをリライトする\u003C\u002Fh2>\n\u003Cp>Vuetifyテーマではビルドされたリソース（jsやcss、画像ファイル等）は全てdistディレクトリ内に生成される。distディレクトリ自体のルーティングはURL上はドキュメントルート直下となる。そのため、dist\u002Fimg\u002F下にビルドされた画像ファイルは、WordPress上でテーマとしてページが表示されると \u003Ccode>{ドメイン名}\u002Fimg\u002F****.jpg\u003C\u002Fcode> のURIで読み込まれることになる。\u003Cbr \u002F>\nそこで、distディレクトリ配下のjs・css・img等の各フォルダやファイルはドキュメントルート下にあるものとして取り扱ってあげる必要がある。\u003Cbr \u002F>\nというわけで、ドキュメントルートに下記設定の\u003Ccode>.htaccess\u003C\u002Fcode>を設置しよう。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-aconf\"># BEGIN WpVuetifyTheme Rules\n<IfModule mod_rewrite.c>\nRewriteCond %{HTTP_HOST} ^vuetify.example.com$\nRewriteCond %{REQUEST_URI} ^\u002F((js|css|img)\u002F.*|favicon\\.ico)\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule ^(.*)$ \u002Fapp\u002Fwp-content\u002Fthemes\u002Fvuetify-theme\u002Fdist\u002F$1 [L]\n<\u002FIfModule>\n# END WpVuetifyTheme Rules\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>リライト条件のHTTP_HOST名は、サイトのホスト（ドメイン）名に書き換えること。\u003Cbr \u002F>\nなお、上記\u003Ccode># BEGIN WpVuetifyTheme Rules\u003C\u002Fcode> ～ \u003Ccode># END WpVuetifyTheme Rules\u003C\u002Fcode> のディレクティブはWordPressによって追加されるリライトディレクティブ（\u003Ccode># BEGIN WordPress\u003C\u002Fcode>～\u003Ccode># END WordPress\u003C\u002Fcode>）よりも\u003Cstrong>前\u003C\u002Fstrong>に記述する必要があるので注意。\u003C\u002Fp>\n\u003Cp>\u003Ccode>.htaccess\u003C\u002Fcode>を更新したら、再度ブラウザで表示を確認してみよう。\u003C\u002Fp>\n\u003Cp>\u003Cimg decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fwp-vuetify-theme-hw.png\" alt=\"WordPress Vuetify Theme\" \u002F>\u003C\u002Fp>\n\u003Cp>無事Vuetifyのロゴ画像も表示されるようになり、上記のようにページが表示される。\u003C\u002Fp>\n\u003Cp>あとは、通常のVuetifyアプリの開発と同じように、\u003Ccode>yarn serve\u003C\u002Fcode>でwatchビルドしながら\u003Ccode>src\u003C\u002Fcode>ディレクトリ下のApp.vueや各コンポーネントを作り込んで行くことになる。\u003C\u002Fp>\n\u003Ch2>Vuetifyテーマを開発する際のヒント\u003C\u002Fh2>\n\u003Ch3>テーマのモックアップ・レビュー\u003C\u002Fh3>\n\u003Cp>Vuetifyテーマではビルドされたリソースはdistディレクトリ下に展開される。そこにはWordPressのテーマとしては使用しないindex.htmlが出力されているので、これらのビルドファイル一式を抽出することで、WordPressがない環境下でもモックアップとしてテーマをレビューできるという素晴らしいメリットがある。\u003Cbr \u002F>\n開発途中のテーマのUIやUXを、都度、静的HTMLとしてステークホルダーにレビューできるのは恩恵しかないだろう。\u003C\u002Fp>\n\u003Cp>やり方としては、dist内のindex.htmlを開き、各種リソースパスを絶対パスから相対パスに書き換えてから、そのままdistディレクトリ自体をレビューイに配るとか、確認用のサーバにアップロードするなりして、index.htmlをブラウザで開いてもらうだけだ。\u003Cbr \u002F>\n難点としては、dist内に出力されるindex.htmlがミニファイされていてコードが読みにくくて相対パス変換がしづらいぐらいか。まぁ、それもエディタで\u003Ccode>><\u003C\u002Fcode>を\u003Ccode>>\\n<\u003C\u002Fcode>に一括変換してあげれば問題なくなるだろう。\u003C\u002Fp>\n\u003Ch3>開発時のwatchビルド中の確認用にダミーデータを準備する\u003C\u002Fh3>\n\u003Cp>\u003Ccode>yarn serve\u003C\u002Fcode>中のテーマの確認は\u003Ccode>localhost:8080\u003C\u002Fcode>で行われるため、WordPressとのデータを連携するような処理はすべて失敗してしまう。このままだと、特にWordPressの投稿データを取得して表示するような、テーマとしての核心部分の処理を作るのが面倒である。そこで、Vueコンポーネント側で実行中のホストを判別して、localhostであればダミーデータを利用するようにしておくのが良いだろう。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>App.vue:\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">data\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  debug: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">created\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">isLocalhost\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">},\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">methods\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  isLocalhost\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    let\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> hostName \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> document.location.hostname\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.debug \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> hostName \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'localhost'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> ||\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> hostName \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '127.0.0.1'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">},\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>上記のようなメソッドをApp.vueに仕込んでおけば、変数\u003Ccode>debug\u003C\u002Fcode>の真偽値でホスト環境を判別できるようになる。そのうえで、App.vueからは子コンポーネントに\u003Ccode>:debug=\"debug\"\u003C\u002Fcode>でdebug値をバインドし、子コンポーネント側からはそのdebug値をpropsで受け取って参照すれば良い。\u003Cbr \u002F>\n例えば、投稿を表示する子コンポーネント等での\u003Ccode><script>\u003C\u002Fcode>は下記のようになる。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>components\u002F*.vue\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> { testPosts } \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '..\u002F..\u002Fpublic\u002Ftest_data'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  props: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    debug: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      Type: Boolean,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      default: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  data\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: () \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    debug: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$props.debug,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    post: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  mounted\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> () {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">getPost\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  methods: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    getPost\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> ajax\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.axios.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">create\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">({ baseURL: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">WORDPRESS_URL_TO_GET_POST\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      await\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ajax.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      .\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">then\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">response\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.post \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> response.data.post\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      .\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">catch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">error\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.debug) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">          this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.post \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> testPost[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$route.path.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">replace\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'\u002F'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>処理内容としては、非同期でWodPressの投稿データを取得する処理でエラーになった場合（\u003Ccode>localhost:8080\u003C\u002Fcode>では必ずエラーになる）に、ホスト判断を行って、localhostならダミーデータを利用するというコードの例だ。ダミーデータは、publicディレクトリにファイルとして準備しておくことになる。以下がダミーデータの例だ。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>public\u002Ftest_data.js\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> testPosts\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">  'about'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'ID'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F int\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_author'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F int\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_date'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'2020-11-20 15:00:00'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: 'YYYY-MM-DD HH:MM:SS'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_date_gmt'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'2020-11-20 06:00:00'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: 'YYYY-MM-DD HH:MM:SS'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_content'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'本文が入ります。'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_title'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'このサイトについて'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_category'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F int: always 0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_excerpt'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'抜粋'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_status'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'publish'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: (publish|pending|draft|private|static|object|attachment|inherit|future)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'comment_status'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'closed'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: (open|closed|registered_only)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'ping_status'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'closed'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: (open|closed)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_password'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_name'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'slug'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'to_ping'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: url\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'pinged'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: url\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_modified'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'2020-11-20 15:00:00'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: 'YYYY-MM-DD HH:MM:SS'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_modified_gmt'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'2020-11-20 06:00:00'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: 'YYYY-MM-DD HH:MM:SS'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_content_filtered'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_parent'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F int\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'guid'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'slug'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'menu_order'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F int: Order Views of Static Page\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_type'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'post'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: (post|page|attachment)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'post_mime_type'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F string: (image\u002Fpng, etc.）\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">    'comment_count'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F int\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>なお、開発が完了したら、これらのデバッグ処理はレンダリング時のオーバーヘッドになり得るので削除するのが望ましい。が、再開発時のことも考慮して残しておきたい場合は、ダミーデータの\u003Ccode>import\u003C\u002Fcode>文と\u003Ccode>if (this.debug)\u003C\u002Fcode>内の処理をそれぞれコメントアウトしておけば良いだろう。\u003C\u002Fp>\n",[276,279,282,285],{"slug":277,"name":278},"theme","Theme",{"slug":280,"name":281},"vue-js","Vue.js",{"slug":283,"name":284},"vuetify","Vuetify",{"slug":74,"name":286},"WordPress",[288,295,303,310],{"slug":289,"title":290,"date":291,"excerpt":292,"image":71,"categories":293},"part2-tips-of-customize-theme-without-wordpressish-coding","第2章 脱WordPress式テーマのカスタマイズ","2020-02-10T15:17:24","まず、下記のソースを見て欲しい。 \u003Chead> \u003Cmeta charset=”UTF-8″> \u003Cmeta name=”viewport” content=”width=device-wid…",[294],{"slug":74,"name":75},{"slug":296,"title":297,"date":298,"excerpt":299,"image":42,"categories":300},"wordpress-emergency-tool","WordPressの管理画面にログインできなくなった時の緊急対処ツール","2017-06-17T00:13:27","WordPressのテーマとプラグインを開発していて、ログイン周りなどをカスタマイズしている時、ブラウザのセッションが切れて管理画面に入れなくなってしまう事などがまれにある。 私の例だと、WordPressの会員制サ…",[301,302],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":304,"title":305,"date":306,"excerpt":307,"image":42,"categories":308},"use-the-latest-version-sage-of-wordpress-startup-theme-roots","WordPressのスタートアップテーマ「Roots」の最新版「Sage」を使う","2015-04-07T19:11:19","WordPressでサイトを作る際、私はいつも「Roots」というテーマをカスタマイズしている。WordPressのコアにバンドルされているtwenty～系のテーマやWEBで配布されているテーマは、色々な機能やそのまま…",[309],{"slug":74,"name":75},{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":311},[312],{"slug":74,"name":75},{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":314},[315],{"slug":94,"name":95},{"slug":317,"title":318,"date":319,"excerpt":320,"image":321,"categories":322},"epic-music-two-steps-from-hell","Epic Music: Two Steps From Hell","2020-12-01T09:34:30","速いもんで、もうAdvent Calendarの季節だ。 今年は初めてQiitaのAdvent Calendar 2020に参加してみようと思って、自分でカレンダーを作ってみた。 まぁ、技術情報を書くのは結構パワーがいる…","\u002Fassets\u002Fuploads\u002F2020\u002F12\u002Ftwo_steps_from_hell.jpg",[323],{"slug":255,"name":256},1793391397315]