下記のようなjsonから値を取り出す際の方法。<pre><code>"japan": [{
 "code": 1,
 "name": "hokkaido",
 "ja": "北海道",
 "type": "region",
 },
 {
 "code": 2,
 "name": "tohoku",
 "ja": "東北",
 "type": "region",
 },
 {
 "code": 3,
 "name": "kanto",
 "ja": "関東",
 "type": "region",
 }
 ]
}</code></pre> nameがkantoである先頭の要素を取得したい場合はfindを使用すると便利。<pre><code>const kanto = json.japan.find((v) =&gt; v.name == "kanto");

console.log(kanto.ja) // 関東</code></pre> typeがregionである要素を全て取得したい場合はfilterを使う<pre><code>const regions = json.japan.filter(function(item, index){
 if (item.type == "region" ) return true;
});

console.log(regions) // [{},{}...] 配列で取得できる</code></pre>

JSON配列から要素の値を検索して取得する

サイドバーでposition:stickyを使いたいときに適切に指定してみても効かなくて小一時間悩みました。 結論から言うと原因はリセットCSSで使用しているress.scssでした。 判明するまでの解決方法を整理します。 <h2 id="h12f2b5955b">1. stickyコンテナーは適切な高さを持っているか</h2>stickyコンテナーはstickyを指定した直の親です。以下の場合は.containerが親です。<pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0;"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre> 上記の例の場合、display: flexで.mainと.sideが横並びになっているので、.containerの高さと.sideの高さは同一となりstickyは動作しません。以下の場合だと動作します。<pre><code>&lt;div class="container style="display: flex;"&gt;
&lt;div class="main" style="height: 1000px;"&gt;
&lt;/div&gt;
&lt;div class="side" style="position: sticky; top: 0; height: 100px"&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre> この場合は.containerが.mainと同一のheight1000px、.sideは.containerよりも低いheight: 100pxとなるためstickyが動作します。 <h2 id="h34c251af52">2. 親にvisible以外のoverflow属性が指定されてないか</h2>sticky要素の親にoverflow: visible以外の指定(hidden, scroll等)がある場合に不能になります。 今回自分の原因はこれでした。リセットCSSでress.cssを使用していてその中にoverflow-y: scrollがあったことによるものでした。<pre><code>html {
 box-sizing: border-box;
 overflow-y: scroll; /* All browsers without overlaying scrollbars ←これが原因 */
 -webkit-text-size-adjust: 100%; /* iOS 8+ */
}</code></pre> コメントアウトして無事動作確認。 <h3 id="h64ae03923e">overflow:visible以外が存在するかチェックする方法</h3>jQueryを使用していれば開発者コンソールで以下を入力して動作チェックできます。<pre><code>$(".sticky要素").parents().css("overflow", "visible")</code></pre> 親要素全てがoverflow:visibleとなるので、入力した後stickyが動作していればどこかの親にoverflow: visible以外の指定がされていることがわかります。

position: stickyが効かない場合に確認すること。リセットCSSにも注意

<h2 id="hdbc740ce5c">証明書のインストール</h2>発行通知メールから証明書ダウンロード 中間証明書ダウンロード クロスルートなし、中間CA証明書 <img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/8eab4835aa804792a62b431d75da1a75/_2020-11-03_18.07.44.png" alt=""> <h2 id="h890f3b5eb6">証明書と中間証明書をダウンロード</h2>証明書と中間証明書を結合 半角文字等入る場合があるので注意 <h2 id="ha2e7ca0ea2">結合証明書と秘密鍵をサーバーにアップロード</h2>/etc/httpd/sslフォルダに置く 秘密鍵のパスフレーズを解除する <code>openssl rsa -in xxxxxxx.key -out xxxxxxx.key</code> /etc/httpd/conf.d/ssl.confで新しい結合証明書、秘密鍵のパスを指定 <code>httpd -t</code> で文法的に問題ないかチェック<pre><code>service httpd stop
service httpd start</code></pre>ブラウザで期限をチェック

linux + apache2.4.43でのSSL設置

ヘッダーが追従の場合、少しずらしたいなど <pre><code>add_filter(mwform_scroll_offset_mw-wp-form-xxx, function( $offset ) {
 return 100; // 100pxずらす、という意味になります。
} );</code></pre>

MW WP FORMプラグインの遷移時のスクロール位置を調整する

固定ページが少なければよいのですが、大量になってくるとセレクトボックスで親ページを選ぶのにも苦労すると思います。例えば都道府県・市町村のように親子関係の固定ページが大量にあると、セレクトボックスには市町村の固定ページも表示されてしまい、該当の都道府県を選びたいだけなのに延々とスクロールしなければならない、みたいな状況です。 そんなときは以下のフィルターを使用してトップレベル（親を持たない）のページのみを表示させましょう。 functions.php<pre><code>// 編集ページでの親ページ選択セレクトボックス
add_filter( 'page_attributes_dropdown_pages_args', function( $dropdown_args, $post ) {
 if ( $post-&gt;post_type == 'post' ) {
 $dropdown_args['depth'] = 1;
 }
 return $dropdown_args;
}, 10, 2 );

// 一覧ページ &gt; クイック編集での親ページ選択セレクトボックス
add_filter( 'quick_edit_dropdown_pages_args', function( $dropdown_args ) {
 if ( $dropdown_args['post_type'] == 'post' ) {
 $dropdown_args['depth'] = 1;
 }
 return $dropdown_args;
} );</code></pre>

【WordPress】ページ属性の親ページを選択する際、トップレベル（親を持たない）のページのみを表示する

デフォルトでは固定ページのみ親子関係を持たせることができますが、投稿でも同様に親子関係を持たせて表示したい場合の設定方法です。functions.phpに記載します。 functions.php<pre><code>/* 通常投稿に親子関係をもたせる */
function post_add_options( $args, $post_type ) {
 if ( 'post' === $post_type ) {
 $post_labels = array(
 'name' =&gt; '投稿',
 'singular_name' =&gt; '投稿',
 'menu_name' =&gt; '投稿',
 'name_admin_bar' =&gt; '投稿',
 'add_new' =&gt; '新規追加',
 'add_new_item' =&gt; '新規投稿を追加',
 'new_item' =&gt; '新規投稿',
 'edit_item' =&gt; '投稿の編集',
 'view_item' =&gt; '投稿の表示',
 'all_items' =&gt; 'すべての投稿',
 'search_items' =&gt; '投稿の検索',
 'not_found' =&gt; '投稿が見つかりませんでした。',
 'not_found_in_trash' =&gt; 'ゴミ箱に投稿が見つかりませんでした。',
 'attributes' =&gt; '投稿の属性',
 );
 $args['labels'] = $post_labels;
 $args['hierarchical'] = true;
 add_post_type_support( 'post', 'page-attributes' );
 }
 return $args;
}
add_filter( 'register_post_type_args', 'post_add_options', 10, 2 );</code></pre> 加えて、URLをhttps://〇〇.com/[親ページスラッグ]/[子ページスラッグ]と表示する場合には以下をfunctions.phpに追記します。 <pre><code>/* 親投稿のスラッグを取得 */
function get_parent_post_slug($post){
 if (!is_object($post) || !$post-&gt;post_parent) {
 return false;
 }
 return get_post($post-&gt;post_parent)-&gt;post_name;
}

/* get_sample_permalinkのfilterフック */
add_filter('get_sample_permalink', function ($permalink, $post_id, $title, $name, $post) {
 if ($post-&gt;post_type != 'post' || !$post-&gt;post_parent) {
 return $permalink;
 }
 $template_permalink = current($permalink);
 $replacement_permalink = next($permalink);
 $postname_string = '/%postname%/';
 $parent_slug = get_parent_post_slug($post);
 $altered_template_with_parent_slug = '/' . $parent_slug . $postname_string;
 $new_template = str_replace($postname_string, $altered_template_with_parent_slug, $template_permalink);
 $new_permalink = [$new_template, $replacement_permalink];

 return $new_permalink;
}, 99, 5);

/* post_linkのfilterフック */
add_filter('post_link', function ($post_link, $post, $leavename) {
 if ($post-&gt;post_type != 'post' || !$post-&gt;post_parent) {
 return $post_link;
 }
 $parent_slug = get_parent_post_slug($post);
 $new_post_link = str_replace($post-&gt;post_name, $parent_slug . '/' . $post-&gt;post_name, $post_link);

 return $new_post_link;
}, 99, 3);

/* pre_get_postsのactionフック */
add_action('pre_get_posts', function ($query) {
 global $wpdb, $wp_query;
 $original_query = $query;
 $uri = $_SERVER['REQUEST_URI'];

 if ($query-&gt;is_main_query() &amp;&amp; !is_admin()) {
 $basename = basename($uri);
 $test_query = sprintf("select * from $wpdb-&gt;posts where post_type = '%s' and post_name = '%s';", 'post', $basename);
 $result = $wpdb-&gt;get_results($test_query);

 if (!($post = current($result)) || !$post-&gt;post_parent) {
 return $original_query;
 }

 $parent_slug = get_parent_post_slug($post);
 $hierarchal_slug = $parent_slug . '/' . $post-&gt;post_name;

 if (!stristr($uri, $hierarchal_slug)) {
 return $original_query;
 }

 $query-&gt;query_vars['post_type'] = ['post'];
 $query-&gt;is_home = false;
 $query-&gt;is_page = true;
 $query-&gt;is_single = true;
 $query-&gt;queried_object_id = $post-&gt;ID;
 $query-&gt;set('page_id', $post-&gt;ID);

 return $query;
 }
}, 1);</code></pre> 注意点として、パーマリンク設定は/%postname%/とすること。 <img src="https://images.microcms-assets.io/assets/d2098da0e58c40478bafe48a8ee351e4/55fcdb306d7c4b9cbe676f5069db31fc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-27%2016.42.06.png" alt="">

【WordPress】投稿でも親子関係をもたせる方法

<pre><code>&lt;h1&gt;h1大見出し大見出し大見出し大見出し&lt;/h1&gt;
&lt;h2&gt;h2大見出し大見出し大見出し大見出し&lt;/h2&gt;
&lt;h3&gt;h3大見出し大見出し大見出し大見出し&lt;/h3&gt;
&lt;h4&gt;h4大見出し大見出し大見出し大見出し&lt;/h4&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。


&lt;a href="https://google.com"&gt;リンクのテキストです。&lt;/a&gt;


&lt;strong&gt;太字です。&lt;/strong&gt;


&lt;em&gt;イタリックです。&lt;/em&gt;


&lt;del&gt;取り消し線です。&lt;/del&gt;


&lt;hr /&gt;


&lt;ul&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&nbsp;	&lt;li&gt;リスト項目&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は引用です。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/blockquote&gt;
&lt;p style="text-align: left;"&gt;この文章は左揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
&lt;p style="text-align: center;"&gt;この文章は中央揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
&lt;p style="text-align: right;"&gt;この文章は右揃えです。文字の大きさ、量、字間、行間等を確認するために入れています。&lt;/p&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h1&gt;h1大見出し大見出し大見出し大見出し&lt;/h1&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h2&gt;h2大見出し大見出し大見出し大見出し&lt;/h2&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h3&gt;h3大見出し大見出し大見出し大見出し&lt;/h3&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
&lt;h4&gt;h4大見出し大見出し大見出し大見出し&lt;/h4&gt;
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</code></pre>

【WordPressコピペ用】投稿のダミーテキスト

Yoastが出力しているタイトルタグ、メタタグ等をfunctions.phpから修正したい場合の方法です。 Yoast SEOと他のプラグインがバッティングしていて、管理画面からカスタマイズできないときに使えます。<h2 id="h8de3ff4e39"> 対応前</h2>Search &amp; Filterという検索用のプラグインを入れていて、検索結果ページのタイトルタグ等を修正したかったのですが、下記の対応をしてもYoast SEOが上書きしてしまい、希望通りのタイトルに上書きされません。 <pre><code>add_filter('wp_title','search_form_title');

function search_form_title($title){
 
 global $searchandfilter;
 
 if ( $searchandfilter-&gt;active_sfid() == 35889)
 {
 return 'Search Results';
 }
 else
 {
 return $title;
 }
 
}</code></pre><a href="https://searchandfilter.com/documentation/search-results/as-an-archive/" target="_blank" rel="noopener noreferrer">https://searchandfilter.com/documentation/search-results/as-an-archive/</a> <code>wp_title</code>はWordPress本体が提供しているフィルター。 <h2 id="heae49c81e4">解決</h2>Yoast SEOが提供しているフィルター<code>wp_seotitle</code>と上記コードを組み合わせると解決できました。タイトルタグと同時に<code>wpseo_opengraph_title</code>フィルターを使用してog:titleも変更しました。<pre><code>// 検索結果ページのタイトルを書きかえる
function search_form_title($title){
 global $searchandfilter;
 if($searchandfilter) {
// 書き換えたいページの条件
 if ( $searchandfilter-&gt;active_sfid() == 84) 
 {
 return '検索結果 - サイト名';
 }
 else
 {
 return $title;
 }
 } else {
// 該当しない場合はデフォルトのタイトルを返す
 return $title;
 }
}
add_filter('wpseo_title','search_form_title');
add_filter('wpseo_opengraph_title','search_form_title');</code></pre> その他ディスクリプション等も書き換えたい場合は下記のURLが参考になります。 hooker.io <a href="http://hookr.io/plugins/yoast-seo/4.7.1/filters/#index=p" target="_blank" rel="noopener noreferrer">http://hookr.io/plugins/yoast-seo/4.7.1/filters/</a> Yoast SEO公式 <a href="https://developer.yoast.com/" target="_blank" rel="noopener noreferrer">https://developer.yoast.com/</a>

【WordPress】Yoast SEOでタイトルタグをfunctions.phpから変更する

スタッフ紹介等で一覧ページには表示したいものの、各スタッフの詳細ページを生成したくないときがあります。 その場合はfunctions.php内でカスタム投稿タイプを登録するregisterposttypeの引数を以下のように設定します。 <pre><code>add_action( 'init', 'my_postname_init' ); // postnameに投稿タイプ名を設定
function mt_postname_init() {
&nbsp;&nbsp;register_post_type( 'postname',
&nbsp;&nbsp;&nbsp;&nbsp;array(
 ....
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'public' =&gt; false, // 詳細ページを生成しない場合はfalse
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'publicly_queryable' =&gt; true, //クエリーは実行できるので一覧での取得は可能です
 &nbsp;&nbsp;&nbsp;&nbsp;)
 &nbsp;&nbsp;);
 }</code></pre>

【WordPress】カスタム投稿タイプで詳細ページを生成しない方法

環境 ubuntu16.04.1 apache2.4 既存パッケージの更新<pre><code>sudo apt update
sudo apt upgrade

sudo add-apt-repository ppa:ondrej/php // php7.3を利用可能なリポジトリ
sudo apt update</code></pre> ただしこの時点でphp7.4が入ってしまうので,7.3を入れる必要がある<pre><code>sudo apt install php7.3 # 7.3のインストール
% php -v # バージョン確認
% sudo apt install php-pear php7.3-curl php7.3-dev php7.3-gd php7.3-mbstring php7.3-zip php7.3-mysql php7.3-xml
 * sudo apt install php7.3-fpm # Fast-CGIモジュール</code></pre> phpのバージョン確認<pre><code>update-alternatives --list php
/usr/bin/php7.0
/usr/bin/php7.3
/usr/bin/php7.4
update-alternatives --config php
数字を選択してversionを指定</code></pre> apache<pre><code>sudo a2dismod php7.0
sudo a2enmod php7.3
% sudo a2enmod proxy_fcgi setenvif
% sudo a2enconf php7.3-fpm
% sudo service apache2 restart</code></pre>参考 <a href="https://www.interserver.net/tips/kb/change-php-version-apache-ubuntu/" target="_blank" rel="noopener noreferrer">How to Change PHP Version in Apache on Ubuntu</a> <a href="https://udon.little-pear.net/wordpress-php-upgrade-to-7-3/" target="_blank" rel="noopener noreferrer">Wordpress (Apache2)のPHPを7.3にバージョンアップ | うどんコード</a>

WordPressの管理画面で非推奨のエラーが出たのでアップデートしました。