JAMstackやWordPress、アニメーションなどWeb制作の技術について投稿してます。

Webサイト

EthereumやSolidity, AlchemyなどWeb3を実現する技術について投稿します

Web3

medium

large

thumbnail

medium_large

GraphQL

JAMstack

Next.js

Word Press

<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#SSG"><span class="toc_number toc_depth_1">1</span> SSG（静的サイトジェネレーター）のメリット</a><ul><li><a href="#i"><span class="toc_number toc_depth_2">1.1</span> ページスピードの速さ</a></li><li><a href="#i-2"><span class="toc_number toc_depth_2">1.2</span> セキュリティの高さ</a></li><li><a href="#CDN"><span class="toc_number toc_depth_2">1.3</span> CDNの利用ができる</a></li></ul></li><li><a href="#Nextjs"><span class="toc_number toc_depth_1">2</span> ブログを作るのにNext.jsを採用した理由</a><ul><li><a href="#NextImage"><span class="toc_number toc_depth_2">2.1</span> 画像の最適化を自動でしてくれるコンポーネントNext/Image</a></li><li><a href="#Incremental_Static_RegenerationISR"><span class="toc_number toc_depth_2">2.2</span> 動的なコンテンツを必要な箇所だけ再生成してくれるIncremental Static Regeneration（ISR）</a></li><li><a href="#SSGSSR"><span class="toc_number toc_depth_2">2.3</span> ページ単位でSSGとSSRが選べる</a></li></ul></li><li><a href="#Word_Press"><span class="toc_number toc_depth_1">3</span> Word Press側の設定</a></li><li><a href="#GraphQL_Code_Generator"><span class="toc_number toc_depth_1">4</span> データ連携にGraphQL Code Generatorを利用</a></li><li><a href="#i-3"><span class="toc_number toc_depth_1">5</span> まとめ</a></li></ul></div>

<h2><span id="SSG">SSG（静的サイトジェネレーター）のメリット</span></h2>



<p>SSG(Static Site Generator)とはビルド時にAPIからデータを取得し、HTMLファイルを生成するものです。Next.jsも機能としてはSSGだけではないのですが、今回はSSGとして利用します。</p>



<p>SSGでWebサイトを作るメリットとして</p>



<ol><li>ページの表示スピードが高い</li><li>セキュリティが高い</li><li>CDNを利用して配信できる</li></ol>



<p>という点が挙げられます。HTMLが予め生成されているためSPAと比べてSEOの心配もないです。</p>



<h3><span id="i">ページスピードの速さ</span></h3>



<p>実際にこのブログのGoogleのPage Speed Insightsのスコアは以下の通りでPCは満点の100、モバイルでも90点台をマークしていてめちゃくちゃ速いです。(2021/9/12現在）</p>



<div class="wp-container-3 wp-block-columns">
<div class="wp-container-1 wp-block-column">
<figure class="wp-block-image size-large"><img width="1024" height="554" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-pc-1024x554.png" alt="" class="wp-image-114" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-pc-1024x554.png 1024w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-pc-300x162.png 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-pc-768x416.png 768w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-pc-1536x831.png 1536w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-pc.png 1574w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>
</div>



<div class="wp-container-2 wp-block-column">
<figure class="wp-block-image size-large"><img width="1024" height="555" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-mobile-1024x555.jpg" alt="" class="wp-image-116" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-mobile-1024x555.jpg 1024w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-mobile-300x163.jpg 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-mobile-768x416.jpg 768w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-mobile-1536x832.jpg 1536w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/PSI-top-mobile.jpg 1572w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>
</div>
</div>



<p>PSIの目安としてはモバイルが50を超えていれば平均より速いかなくらいだそうです。</p>



<h3><span id="i-2">セキュリティの高さ</span></h3>



<p>CMSを利用したWebサイトとして圧倒的なシェアを誇るのがWord Pressですが、実際にページを表示するテーマとコンテンツを管理するCMSが同一サーバー上に存在します。</p>



<p>Word Pressは管理画面や利用しているプラグインの脆弱性を突かれて悪意のある攻撃を受けることが多く、Word Pressはセキュリティが不安で採用できないという企業も少なからず存在します。</p>



<p>SSGを利用したいわゆるJAMstackのWebサイトの場合は実際に表示されるサイトとCMSが別のところに存在しているので公開されているサイトは攻撃の影響をダイレクトに受けないためセキュリティが非常に高いです。</p>



<h3><span id="CDN">CDNの利用ができる</span></h3>



<p>SSGでは静的ファイルが生成されるので、そのままCDNで配信することができ、NetlifyやVercelなどCDNを利用したホスティングサービスもメジャーなものがいくつかあります。</p>



<p>CDNはソフトウェアのアップデートなどにも利用されていて、セキュリティが高く、大量のアクセスにも耐えられるためスケーリングもしやすく、スピードも早く、そのメリットをそのまま受けることができます。</p>



<h2><span id="Nextjs">ブログを作るのにNext.jsを採用した理由</span></h2>



<p>SSGとして有名なのはGatsby.jsやNuxt.jsなどがありますが、2020年の途中からNext.jsが存在感を大きく増しました。</p>



<p>Next.jsはReactのフレームワークでVercelが開発をしています。Vercel社は<a href="https://vercel.com/" target="_blank" rel="noreferrer noopener">Vercel</a>というホスティングサービスも開発/運営している企業で、Next.jsとVercelの組み合わせで他のSSGではなかなか実現できていないような機能が明確な差別化の要因になっています。</p>



<h3><span id="NextImage">画像の最適化を自動でしてくれるコンポーネントNext/Image</span></h3>



<p>Next.js 10.0から登場したNextのコンポーネントでWebPの生成やリサイズを自動でしてくれます。APIから取得した画像も対象でNext.jsの大きなメリットの１つです。</p>



<h3><span id="Incremental_Static_RegenerationISR">動的なコンテンツを必要な箇所だけ再生成してくれる<strong>Incremental Static Regeneration（ISR）</strong></span></h3>



<p>SSGのデメリットとして記事を更新してから全ページをビルドするので完了するまでにタイムラグがあることが挙げられます。ページ数が膨大になると更新にそれだけ多くの時間が掛かってしまいます。</p>



<p>ISRは基本的にはSSGと同じで静的ページを生成するのですが、ビルドして一定時間が経った時にアクセスがあると裏でAPIからデータをまた取得し、投稿データなどの更新がある場合は影響のある範囲だけで自動的に再ビルドされます。今のところNext.jsだけの機能になります。</p>



<h3><span id="SSGSSR">ページ単位でSSGとSSRが選べる</span></h3>



<p>今回作るのはブログなので全ページSSGで問題ないですが、リアルタイム性が欲しいページが一部ある場合はそこだけSSRにすることもできます。</p>



<h2><span id="Word_Press">Word Press側の設定</span></h2>



<p>Word Pressのメリットは管理画面が使いやすいことで、会社でもWeb担当の人はWord Pressに慣れていたりします。記事作成自体はWord Pressで行うのでSSGを利用したJAMstackに移行しても更新作業自体はほとんど変わりがなく済みます。</p>



<p>Word PressではテーマをWebサイトの表示に使わない代わりにAPIを利用します。デフォルトでREST APIがあるのでそれを使うこともできるのですが、ACF(Advanced Custom Fields)などでカスタムフィールドを設定する場合にカスタマイズが必要になため設定が割と大変です。</p>



<p>最近は「WP GraphQL」というプラグインを利用してGraphQLのエンドポイントを作ることがほとんどです。</p>



<figure class="wp-block-image size-large"><img width="1024" height="548" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/wp-graphql-1024x548.jpg" alt="" class="wp-image-117" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/wp-graphql-1024x548.jpg 1024w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/wp-graphql-300x160.jpg 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/wp-graphql-768x411.jpg 768w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/wp-graphql-1536x822.jpg 1536w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/wp-graphql.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Explorerで取得したいデータの項目にチェックを入れるとquery文を作ってくれて取得したデータも整形された形ですぐ確認することができるようになっています。</p>



<p>ACFやYoastSEOなどのメジャーなプラグインで設定したデータも拡張版をインストールすることで簡単に取得することができます。</p>



<p>Next.jsのWord Pressを使うデモもWP GraphQLの利用を前提した作りになっているので、割とメジャーな方法だと思います。</p>



<h2><span id="GraphQL_Code_Generator">データ連携にGraphQL Code Generatorを利用</span></h2>



<p>GraphQLを利用するときにおすすめのツールが<a href="https://www.graphql-code-generator.com/"><strong>GraphQL Code Generator</strong></a>です。</p>



<p>必要なデータを取得する設定をするとそのデータを実際に取ってくる関数を作ってくれたり、取得するデータの型定義を自動でしてくれたりするのでTypeScriptを使う場合にも非常に便利です。</p>



<p>GraphQLのクエリ文を書いておくと関数を作ってくれるのが、それぞれページでデータ取得する時の記述がスッキリしていい感じです。</p>



<h2><span id="i-3">まとめ</span></h2>



<p>以上のような技術を使うことで爆速のブログを作ることができました。JAMstackのサイトでよくある遷移するページにDOMを書き換えるjsを予め読み込んでおくことでページ遷移がネイティブの遷移に比べてすごい速い仕様もあるのでPSIのスコア以上に体感で速いサイトになっています。</p>



<p>セキュリティのことを考えても従来のWord Pressのテーマを利用したサイトよりもNext.jsなどを利用したJAMstackサイトが採用されることはこれから増えていくと思います。</p>


Next.js + VercelでWord PressをヘッドレスCMSとして爆速ブログを作ってみた

Web制作

<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#next-sitemap"><span class="toc_number toc_depth_1">1</span> next-sitemapをインストールする</a></li><li><a href="#i"><span class="toc_number toc_depth_1">2</span> 設定ファイルを作成する</a></li><li><a href="#i-2"><span class="toc_number toc_depth_1">3</span> サイトマップをビルドするコマンドを設定する</a></li><li><a href="#Vercel"><span class="toc_number toc_depth_1">4</span> Vercelでビルドの設定を変更する</a></li><li><a href="#sitemapxml"><span class="toc_number toc_depth_1">5</span> ビルドしてsitemap.xmlを確認してみる</a></li></ul></div>

<p>Next.jsで作ったこのブログにsitemap.xmlを追加したので、その方法を紹介します。</p>



<h2><span id="next-sitemap">next-sitemapをインストールする</span></h2>



<p>今回は簡単にsitemap.xmlを生成できそうなパッケージの<a rel="noreferrer noopener" href="https://github.com/iamvishnusankar/next-sitemap#building-sitemaps" target="_blank">next-sitemap</a>を利用することにしました。</p>



<p>他には<a rel="noreferrer noopener" href="https://github.com/IlusionDev/nextjs-sitemap-generator" target="_blank">nextjs-sitemap-generator</a>が人気のパッケージでどちらかを使うことが多いようです。next-sitemapの方が設定するものが少なく簡単に作成できそうだったのでnext-sitemapを採用します。</p>



<pre class="wp-block-code"><code>yarn add next-sitemap -D</code></pre>



<p>上記のコマンドでNext.jsのプロジェクトにインストールします。</p>



<h2><span id="i">設定ファイルを作成する</span></h2>



<p>Next.jsのプロジェクトのルート直下にnext-sitemap.jsを作成して設定内容を記述します。</p>



<pre class="wp-block-code"><code>module.exports = {
  siteUrl: process.env.SITE_URL || 'https://crop-cream.com',
  generateRobotsTxt: true,
}</code></pre>



<p>今回は必要最低限の設定で十分なので上記だけですが、必要に応じて<a href="https://github.com/iamvishnusankar/next-sitemap#configuration-options" target="_blank" rel="noreferrer noopener">オプション</a>で色々と設定することができます。</p>



<h2><span id="i-2">サイトマップをビルドするコマンドを設定する</span></h2>



<p>package.jsonの中でコマンドの設定をします。</p>



<pre class="wp-block-code"><code>{
  "build": "next build",
  "postbuild": "next-sitemap"
}</code></pre>



<p>公式ではpostbuildを作るようになっていたのでそのまま作ってみましたが、buildの中にnext-sitemapを入れても大丈夫です。</p>



<h2><span id="Vercel">Vercelでビルドの設定を変更する</span></h2>



<p>前のコマンドの設定で既存のbuildコマンドの中にnext-sitemapを入れた場合は特に設定不要です。</p>



<p>Vercelのsettings&gt;Generalに行き、BUILD COMMANDの項目を修正します。</p>



<figure class="wp-block-image size-large"><img width="1024" height="140" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-build-command-1024x140.png" alt="" class="wp-image-86" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-build-command-1024x140.png 1024w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-build-command-300x41.png 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-build-command-768x105.png 768w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-build-command.png 1452w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2><span id="sitemapxml">ビルドしてsitemap.xmlを確認してみる</span></h2>



<p>ここまでの設定を反映してビルドしてsitemap.xmlが生成されているか確認してみましょう。</p>



<p>成功していれば画像のようにルートにsitemap.xmlが生成されているはずです。</p>



<figure class="wp-block-image size-full"><img width="814" height="498" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-sitemap.png" alt="" class="wp-image-87" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-sitemap.png 814w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-sitemap-300x184.png 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/shot-sitemap-768x470.png 768w" sizes="(max-width: 814px) 100vw, 814px" /></figure>



<p></p>


Next.jsで作ったWebサイトにsitemap.xmlを設定する

<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#functionsphp"><span class="toc_number toc_depth_1">1</span> functions.phpでカスタムエンドポイントを設定する</a><ul><li><a href="#functionsphp-2"><span class="toc_number toc_depth_2">1.1</span> functions.phpで独自のエンドポイントを登録する</a></li><li><a href="#i"><span class="toc_number toc_depth_2">1.2</span> 登録したカスタムエンドポイントにデータのレスポンスを返す</a></li></ul></li><li><a href="#i-2"><span class="toc_number toc_depth_1">2</span> まとめ</a></li></ul></div>

<p>WordPressのREST APIをカスタマイズしてヘッドレスCMSとして利用する方法を解説します。ただ今は「WP GraphQL」というプラグインを利用してGraphQLを生やす方が簡単で便利だと思うので、今後使うことはなさそうです。</p>



<h2><span id="functionsphp">functions.phpでカスタムエンドポイントを設定する</span></h2>



<h3><span id="functionsphp-2">functions.phpで独自のエンドポイントを登録する</span></h3>



<p>今回は/wp-json/wp/v2/toppageにオリジナルのエンドポイントを作成します。</p>



<pre class="wp-block-code"><code>function my_custom_rest_top() {
  //第1引数:ネームスペース  第2:URLの末尾 第3:エンドポイントのオプション
  register_rest_route('wp/v2', 'toppage', array(
      'methods' =&gt; WP_REST_SERVER::READABLE, //GETだけ許可
      'callback' =&gt; 'my_toppage'
  ));
}
add_action('rest_api_init', 'my_custom_rest_top');</code></pre>



<p>register_rest_routeの第１引数は&#8217;wp/v2&#8217;で第２引数に独自エンドポイントのURLの末尾にくる文字を設定してください。今回はトップページに使うのでtoppageにしました。</p>



<p>第３引数はエンドポイントのオプションになります。methodsではgetだけを許可すれば良いので <strong>WP_REST_SERVER::READABLE</strong>を設定します。<br>callbackでは下に書くデータを返す関数名を入れます。</p>



<h3><span id="i">登録したカスタムエンドポイントにデータのレスポンスを返す</span></h3>



<p>functions.phpの続きに登録した独自のエンドポイントにデータを入れていく関数を書きます。</p>



<p>今回は①最新の投稿５件、②カルーセルに表示される投稿５件（topのタグを設定）③サイドバーに表示される投稿５件（sideのタグを設定）の３種類を１つのエンドポイントにまとめます。</p>



<pre class="wp-block-code"><code>function my_toppage() {
  $my_query = new WP_Query(array(
      'post_type' =&gt; 'post',
      'posts_per_page' =&gt; 5,
  ));
  $my_query_results = array();
  while($my_query-&gt;have_posts()) {
      $my_query-&gt;the_post();
      $category = get_the_category();
      $catname = $category&#91;0]-&gt;cat_name;
      array_push($my_query_results, array(
          'id' =&gt; get_the_id(),
          'title' =&gt; get_the_title(),
          'date' =&gt; get_the_date(),
          'category' =&gt; $catname,
          'excerpt' =&gt; get_the_excerpt(),
          'thumbnail' =&gt; get_the_post_thumbnail_url(0, 'full'),
          'slug' =&gt; get_post()-&gt;post_name
      ));
  }

  $top_query = new WP_Query(array(
    'post_type' =&gt; 'post',
    'posts_per_page' =&gt; 5,
    'tag' =&gt; 'top',
  ));
  $top_query_results = array();
  while($top_query-&gt;have_posts()) {
      $top_query-&gt;the_post();
      $category = get_the_category();
      $catname = $category&#91;0]-&gt;cat_name;
      array_push($top_query_results, array(
          'id' =&gt; get_the_id(),
          'title' =&gt; get_the_title(),
          'date' =&gt; get_the_date(),
          'category' =&gt; $catname,
          'excerpt' =&gt; get_the_excerpt(),
          'thumbnail' =&gt; get_the_post_thumbnail_url(0, 'full'),
          'slug' =&gt; get_post()-&gt;post_name
      ));
  }

  $side_query = new WP_Query(array(
    'post_type' =&gt; 'post',
    'posts_per_page' =&gt; 5,
    'tag' =&gt; 'side',
  ));
  $side_query_results = array();
  while($side_query-&gt;have_posts()) {
      $side_query-&gt;the_post();
      $category = get_the_category();
      $catname = $category&#91;0]-&gt;cat_name;
      array_push($side_query_results, array(
          'id' =&gt; get_the_id(),
          'title' =&gt; get_the_title(),
          'date' =&gt; get_the_date(),
          'category' =&gt; $catname,
          'excerpt' =&gt; get_the_excerpt(),
          'thumbnail' =&gt; get_the_post_thumbnail_url(0, 'full'),
          'slug' =&gt; get_post()-&gt;post_name
      ));
  }

  
  $all_results = array(
    $my_query_results,
    $top_query_results,
    $side_query_results
  );
  return $all_results;
}</code></pre>



<p>それぞれのデータを返して配列にまとめてしまいます。例では①〜③を順番に入れています。それぞれ違うのはタグの絞り込みくらいだったのでほとんど同じになりました。</p>



<h2><span id="i-2">まとめ</span></h2>



<p>それぞれのAPIにアクセスしてたときとはデータの構造が変わるのでaxiosのデータの取得のところの処理を書き換えたら完了です。</p>



<p>最近はもっぱら「WP GraphQL」を利用しています。GraphQLいいですね。WPでもREST APIの設定をして利用するより簡単で便利です。</p>


WordPress REST APIでカスタムエンドポイントを設定する方法

<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i"><span class="toc_number toc_depth_1">1</span> カスタム投稿タイプとは？</a></li><li><a href="#functionsphp"><span class="toc_number toc_depth_1">2</span> functions.phpでカスタム投稿を設定</a><ul><li><a href="#i-2"><span class="toc_number toc_depth_2">2.1</span> カスタム投稿の編集画面で利用する機能の設定</a></li><li><a href="#i-3"><span class="toc_number toc_depth_2">2.2</span> カスタム投稿タイプの諸設定</a></li><li><a href="#i-4"><span class="toc_number toc_depth_2">2.3</span> カスタムタクソノミー の設定</a></li></ul></li><li><a href="#i-5"><span class="toc_number toc_depth_1">3</span> まとめ</a></li></ul></div>

<h2><span id="i">カスタム投稿タイプとは？</span></h2>



<p>WordPressにはデフォルトで投稿機能が備わっています。投稿はカテゴリ分けをするなどしてそれだけでも十分使うことができます。</p>



<p>しかし管理するコンテンツの種類が多くなるとどうしても違った使い方をしたいコンテンツが出てきたり、管理しにくくなったりします。</p>



<p>そんな時は投稿機能と同じようなメニューをオリジナルで追加することができます。カスタム投稿はプラグインでも追加することができますが、無駄にプラグインを増やすとコンフリクトを起こしたり、脆弱性が増すこともあるため今回はテーマのfunctions.phpを使ってカスタム投稿を追加します。</p>



<h2><span id="functionsphp">functions.phpでカスタム投稿を設定</span></h2>



<p>今回は「ニュース」という名前のカスタム投稿を追加します。まずコードをみてみましょう。</p>



<p style="margin-bottom: 0;"><strong>functions.php</strong></p>



<pre class="wp-block-code"><code>function create_news_post_type() {
  $newsSupports = &#91;
    'title',  // 記事タイトル
    'editor', // エディタ
    'excerpt', // 抜粋文
    'thumbnail',  // アイキャッチ画像
    'revisions'  // リビジョン
  ];
  register_post_type( 'news',  // カスタム投稿名
    array(
      'label' => 'NEWS',  // 管理画面の左メニューに表示されるテキスト
      'public' => true,  // 投稿タイプをパブリックにするか否か
      'has_archive' => true,  // アーカイブを有効にするか否か
      'menu_position' => 5,  // 管理画面上でどこに配置するか
      'show_in_rest' => true, // ブロックエディタを使用、REST APIからのデータ取得の許可
      'rest_base' => 'news', // /wp-json/wp/v2/newsのようにデータを取得できるURLの末尾の設定
      'supports' => $newsSupports  // 編集画面でどの機能を使うかの設定
    )
  );
  //カスタムタクソノミーの設定
  register_taxonomy(
    'newscat', //カテゴリー名（任意）
    'news', //カスタム投稿名
    array(
      'hierarchical' => true, // カテゴリーの親子関係の有無
      'update_count_callback' => '_update_post_term_count',
      'label' => 'カテゴリー',　// メニューでの表示文字列
      'show_admin_column' => true, // 管理画面の一覧に表示
      'public' => true,
      'show_ui' => true,
      'show_in_rest' => true
    )
  );
}
add_action( 'init', 'create_news_post_type' );</code></pre>



<p>順番にコードの中身をみていきます。</p>



<h3><span id="i-2">カスタム投稿の編集画面で利用する機能の設定</span></h3>



<pre class="wp-block-code"><code>$newsSupports = &#91;
    'title',  // 記事タイトル
    'editor', // エディタ
    'excerpt', // 抜粋文
    'thumbnail',  // アイキャッチ画像
    'revisions'  // リビジョン
];</code></pre>



<p>まず編集画面で使用するモジュールを設定します。タイトルとエディタ以外にも必要なものがあれば随時追加してください。</p>



<p>今回は抜粋文とアイキャッチとリビジョンを入れています。</p>



<h3><span id="i-3">カスタム投稿タイプの諸設定</span></h3>



<pre class="wp-block-code"><code>  register_post_type( 'news',  // カスタム投稿名
    array(
      'label' => 'NEWS',  // 管理画面の左メニューに表示されるテキスト
      'public' => true,  // 投稿タイプをパブリックにするか否か
      'has_archive' => true,  // アーカイブを有効にするか否か
      'menu_position' => 5,  // 管理画面上でどこに配置するか
      'show_in_rest' => true, // ブロックエディタを使用、REST APIからのデータ取得の許可
      'rest_base' => 'news', // /wp-json/wp/v2/newsのようにデータを取得できるURLの末尾の設定
      'supports' => $newsSupports  // 編集画面でどの機能を使うかの設定
    )
  );</code></pre>



<p>register_post_typeを使ってカスタム投稿タイプの追加設定をします。</p>



<p>まずカスタム投稿名を設定します。今回はnewsにしています。</p>



<p>その他の設定を配列で設定します。</p>



<p>labelは管理画面のメニューで表示されるテキストです。</p>



<p>publicはtrueにしましょう。管理画面とフロントでカスタム投稿タイプが利用可能になります。</p>



<p>has_archiveはtrueにするとアーカイブが有効になります。アーカイブのスラッグは設定した投稿名、ここではnewsになります。</p>



<p>menu_positionはメニューの表示位置です。ここでは投稿の下に表示させています。</p>



<p>show_in_restはREST APIを有効にするかどうかです。有効化するとエディタがブロックエディタになります。REST API使いつつクラシックエディタを使用したい場合はクラシックエディタのプラグインを入れると良いです。</p>



<p>rest_baseはカスタム投稿タイプのREST APIのエンドポイントを設定できます。newsとするとhttps://sample-site.com/wp-json/wp/v2/newsでjson形式のデータにアクセスできます。</p>



<p>supportsは先ほどまとめた編集画面での使用モジュールの設定です。$newsSupportsを入れておきます。</p>



<h3><span id="i-4">カスタムタクソノミー の設定</span></h3>



<pre class="wp-block-code"><code>  register_taxonomy(
    'newscat', //タクソノミー名（任意）
    'news', //カスタム投稿名
    array(
      'hierarchical' => true, // カテゴリーの親子関係の有無
      'update_count_callback' => '_update_post_term_count',
      'label' => 'カテゴリー',　// メニューでの表示文字列
      'show_admin_column' => true, // 管理画面の一覧に表示
      'public' => true,
      'show_ui' => true,
      'show_in_rest' => true
    )
  );</code></pre>



<p>次にカスタムタクソノミーの設定です。今回はカテゴリーとして使います。</p>



<p>タクソノミー の名前を好きなように決めてください。次にカスタム投稿タイプの名前を入れて、タクソノミー の設定をしていきます。</p>



<p>今回は親子関係ありでメニューにはカテゴリーと表記させています。</p>



<h2><span id="i-5">まとめ</span></h2>



<p>以上がfunctions.phpでカスタム投稿タイプを設定する方法です。コピペして一部名称など変えるだけで簡単にカスタム投稿タイプが作れると思います。</p>



<p>ACF（Advanced Custom Fields)でカスタムフィールドを設定するとその投稿タイプ特有の入力欄などが設定できるので、用途が基本の投稿と分かれてしまったり、管理が大変な場合は是非使ってみてください。</p>


プラグイン不要！WordPressでカスタム投稿タイプを追加する方法

アニメーション

<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i"><span class="toc_number toc_depth_1">1</span> 波の動きをつける用に海の画像を用意する</a></li><li><a href="#HTMLCSS2"><span class="toc_number toc_depth_1">2</span> HTMLとCSSで2枚の画像を重ねる</a></li><li><a href="#SVG_Turbulence_Filter"><span class="toc_number toc_depth_1">3</span> SVG Turbulence Filterを使用して波の動きをつける</a><ul><li><a href="#ltfeTurbulencegt"><span class="toc_number toc_depth_2">3.1</span> &lt;feTurbulence&gt;</a></li><li><a href="#ltfeDisplacementMapgt"><span class="toc_number toc_depth_2">3.2</span> &lt;feDisplacementMap&gt;</a></li><li><a href="#ltanimategt"><span class="toc_number toc_depth_2">3.3</span> &lt;animate&gt;でフィルターに動きをつける</a></li><li><a href="#CSSSVG"><span class="toc_number toc_depth_2">3.4</span> CSSで海だけの画像にSVGのフィルターを適用する</a></li></ul></li><li><a href="#i-2"><span class="toc_number toc_depth_1">4</span> まとめ</a></li></ul></div>

<p>今回はWebGLやJavaScriptを用いずにSVGのfilterを使ってCSSだけで画像のように画像の海の部分に波の動きをつける方法を解説していきます。</p>



<h2><span id="i">波の動きをつける用に海の画像を用意する</span></h2>



<p>１年くらい前に江ノ島にいった時の画像を使います。もしなかなか外に出られなくて海の画像が用意できない場合はこちらの画像を使ってみてください。</p>



<figure class="wp-block-image size-large"><img width="1024" height="768" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enoshima-1024x768.jpeg" alt="" class="wp-image-51" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enoshima-1024x768.jpeg 1024w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enoshima-300x225.jpeg 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enoshima-768x576.jpeg 768w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enoshima.jpeg 1400w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>画像を準備したらphotoshopなどで画像を切り抜いて海の部分だけを残した画像を作ってみましょう。</p>



<figure class="wp-block-image size-large"><img width="1024" height="490" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/sea-cutting-1024x490.jpeg" alt="" class="wp-image-52" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/sea-cutting-1024x490.jpeg 1024w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/sea-cutting-300x144.jpeg 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/sea-cutting-768x367.jpeg 768w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/sea-cutting.jpeg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>このような感じで海の部分だけを切り抜きます。</p>



<p>切り抜いた画像がこちらです。画像編集できない場合はこちらを使ってみてください。これで素材が揃いました。</p>



<figure class="wp-block-image size-large"><img width="1024" height="768" src="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enosea-1024x768.png" alt="" class="wp-image-53" srcset="https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enosea-1024x768.png 1024w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enosea-300x225.png 300w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enosea-768x576.png 768w, https://blog.otona-finance.com/wp/wp-content/uploads/2021/09/enosea.png 1400w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2><span id="HTMLCSS2">HTMLとCSSで2枚の画像を重ねる</span></h2>



<p>最初の画像と海部分だけ切り抜いた画像を重ねて一枚の画像に見えるようにします。</p>



<p><strong>HTML</strong></p>



<pre class="wp-block-code"><code>&lt;div class="sample"&gt;
    &lt;div class="bg"&gt;
        &lt;div class="sea" /&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>



<p><strong>CSS</strong></p>



<pre class="wp-block-code"><code>.sample {
    width: 700px;
    height: 525px;
    overflow: hidden;
    position: relative;
  }
  .bg {
    background-image: url(https://contents.crop-cream.com/img/enoshima.jpg);
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    position: absolute;
    background-size: cover;
  }
  .bg .sea {
    position: absolute;
    background-image: url(https://contents.crop-cream.com/img/enosea.png);
    width: 100%;
    height: 100%;
    filter: url(#turbulence);
    background-size: cover;
  }</code></pre>



<h2><span id="SVG_Turbulence_Filter">SVG Turbulence Filterを使用して波の動きをつける</span></h2>



<h3><span id="ltfeTurbulencegt">&lt;feTurbulence&gt;</span></h3>



<p>今回は&lt;feTurbulence&gt;というSVGのフィルターを使用します。雲とかマーブル模様のようなフィルターがかかります。マーブル模様のぐにゃっとなるのをノイズという言い方をしてるみたいです。</p>



<p>attributeについて</p>



<p>baseFrequency：　ノイズの荒さを調整できます。</p>



<p>numOctaves：　ノイズのオクターブ。数値が大きくなると模様が複雑な形になる。</p>



<p>seed：　乱数を設定するときの開始数値。</p>



<p>stitchTiles：　タイルのつなぎ目の処理の指定。stitchかnoStitchを選ぶ。デフォルトはnoStitch。</p>



<p>type：　noise関数かturbulence関数のどちらを使用するか指定。</p>



<h3><span id="ltfeDisplacementMapgt">&lt;feDisplacementMap&gt;</span></h3>



<p>画像を変位させるフィルター。</p>



<p>attributeについて</p>



<p>scale：　変位スケール因子。0だと何も変化をあたえなくなる。</p>



<p>in：　フィルタが適用される要素のグラフィック内容を指定。デフォルトはSourceGraphic。</p>



<pre class="wp-block-code"><code>&lt;svg&gt;
     &lt;filter id="turbulence" x="0" y="0" width="100%" height="100%"&gt;
          &lt;feTurbulence id="sea-filter" numOctaves="1" seed="3" baseFrequency="0.02 0.06" /&gt;
          &lt;feDisplacementMap scale="10" in="SourceGraphic" /&gt;
     &lt;/filter&gt;
&lt;/svg&gt;</code></pre>



<p>上記のようなコードでフィルターが作られます。次にこのフィルターを動かして波のような動きをつけます。</p>



<h3><span id="ltanimategt">&lt;animate&gt;でフィルターに動きをつける</span></h3>



<p>&lt;animate&gt;タグはSVGの要素の属性をkeyframesのように時間経過で変化させることができます。今回は&lt;feTurbulence&gt;のbaseFrequencyの値を変化させて波の動きをつけていきます。</p>



<pre class="wp-block-code"><code>&lt;svg&gt;
    　&lt;filter id="turbulence" x="0" y="0" width="100%" height="100%"&gt;
          &lt;feTurbulence id="sea-filter" numOctaves="1" seed="3" baseFrequency="0.02 0.06" /&gt;
          &lt;feDisplacementMap scale="10" in="SourceGraphic" /&gt;
          &lt;animate
            xlink:href="#sea-filter"
            attributeName="baseFrequency"
            dur="60s"
            keyTimes="0;0.5;1"
            values="0.02 0.06;0.04 0.08;0.02 0.06"
            repeatCount="indefinite"
          /&gt;
      &lt;/filter&gt;
&lt;/svg&gt;</code></pre>



<p>&lt;feTurbulence&gt;のbaseFrequencyの値を0.02 0.06から0.04 0.08に変化させてまた元に戻すというのを繰り返します。</p>



<h3><span id="CSSSVG">CSSで海だけの画像にSVGのフィルターを適用する</span></h3>



<p>フィルターをつけるcssを追加します。filter: url(#turbulence);</p>



<p><strong>CSS</strong></p>



<pre class="wp-block-code"><code>  .bg .sea {
    position: absolute;
    background-image: url(https://contents.crop-cream.com/img/enosea.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: url(#turbulence);
  }</code></pre>



<h2><span id="i-2">まとめ</span></h2>



<p>これで海の部分だけがぐにゃぐにゃ動くようになったと思います。SVGを使うと表現の幅が増えるので、まだ分からないことも多いですが掘り下げて使いこなせるようになりたいですね。</p>


Webサイトのブログ記事

Next.js + VercelでWord PressをヘッドレスCMSとして爆速ブログを作ってみた

Next.jsで作ったWebサイトにsitemap.xmlを設定する

WordPress REST APIでカスタムエンドポイントを設定する方法

プラグイン不要！WordPressでカスタム投稿タイプを追加する方法

CSSだけ！SVGのTurbulence Filterで海に波の動きをつける方法