やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

WordPress カスタムタクソノミー

カスタム投稿に、カテゴリータイプのカスタムタクソノミーをつける

<?php
function create_type_of_book() {
  register_taxonomy(
    'type_of_book',
    'book',
  array(
    'label' => __( '本の種類' ),
    'show_in_rest' => true, // Gutenbergエディタでは必要らしい
    'show_ui' => true, //管理画面から編集できるようにする
    'hierarchical' => true, //falseにするとタグになる
    'show_admin_column' => true, //記事一覧に表示させるかどうか
    'rewrite' => array( 'slug' => 't' ), //URLのカテゴリーベース的な部分
    // 'capabilities' => array( //権限関係、必要がなければ設定しなくていいと思う
    //   'assign_terms' => 'edit_guides',
    //   'edit_terms' => 'publish_guides'
    // )
  )
);
}
add_action( 'init', 'create_type_of_book' );
?>

WordPressでiframeだけoEmbedが効かない問題

いまどきのWordPressは、YouTubeGoogle mapのURLをコンテンツエリアに貼るだけで

自動的にiframe埋め込みをしてくれるのですが、

この機能は oEmbed というヤツが担っています。

iframeだけ効かなくなった

あちこちテーマをいじっていたら、ある日突然、

自動埋め込みが効かなくなった。

直接iframeタグをコピペで貼れば埋め込まれるものの、

URL → iframeの自動変換が作動しない。

iframe以外の、たとえば他所のブログ記事URLをカード表示にする機能は、通常通り動いていた。

(その場合、iframeではなくblockquoteでカード表示される)

原因を探る

必要なファイルが読み込まれているか

参考

hyperts.net

<link rel='https://api.w.org/' href='http://自分のドメイン/wp-json/' />
<link rel="alternate" type="application/json+oembed" href="http://自分のドメイン/wp-includes/oembed/1.0/embed?url=独自のパラメータ" />
<link rel="alternate" type="text/xml+oembed" href="http://自分のドメイン/wp-includes/oembed/1.0/embed?url=独自のパラメータ" />
<script type='text/javascript' src='http://自分のドメイン/wp-includes/js/wp-embed.min.js'></script>

ちゃんと読み込まれているのを確認。

プラグインが原因説

一通りプラグインを切ったりしてみたが、関係なかった。

ついでにfunctions.phpjavascriptの記述をコメントアウトしてみたりしたが、

直らなかった。

キャッシュが原因説

どうやらoEmbedは余計なキャッシュを大量生産しちゃうらしい。

blog.z0i.net

これを消せば解決しそうな気もするが、

データベース触りたくない…

functions.php でキャッシュをクリア

www.it-swarm.dev

このサイトの2つめの方法を採用。

add_filter( 'oembed_ttl', function( $ttl, $url, $attr, $post_ID )
{
    // Only do this on single posts
    if( is_single() )
    {
        // Oembeds cached before this time, will be recached:
        $recache_time  = '2015-09-23 23:26:00';     // <-- Set this to the current time.

        // Get the time when oEmbed HTML was last cached (based on the WP_Embed class)
        $key_suffix    = md5( $url . serialize( $attr ) );
        $cachekey_time = '_oembed_time_' . $key_suffix;
        $cache_time    = get_post_meta( $post_ID, $cachekey_time, true );

        // Get the cached HTML 
        $cachekey      = '_oembed_' . $key_suffix;
        $cache_html    = get_post_meta( $post_ID, $cachekey, true );

        // Check if we need to regenerate the oEmbed HTML:
        if(     
                $cache_time < strtotime( $recache_time )     // cache time check
             && false !== strpos( $cache_html, 'youtube' )   // contains "youtube" stuff 
             && ! do_action( 'wpse_do_cleanup' )             // let's just run this once 
             && 1 === $GLOBALS['wp_embed']->usecache
        ) {
            // What we need to skip the oembed cache part
            $GLOBALS['wp_embed']->usecache = 0; 
            $ttl = 0;               
            // House-cleanoing
            do_action( 'wpse_do_cleanup' );
        }
    }
    return $ttl;
}, 10, 4 );

 

// Set the usecache attribute back to 1.
add_filter( 'embed_oembed_discover', function( $discover )
{
    if( 1 === did_action( 'wpse_do_cleanup' ) )
        $GLOBALS['wp_embed']->usecache = 1;
    return $discover;
} );

これをこのままfunctions.phpに貼ったら、

無事に動くようになった!やった〜〜!!

microCMSとJavascriptを利用して簡単なサイトを作る

WordPressを入れるほどじゃないけど、HTML手打ちもバカバカしいので
ヘッドレスCMSを利用して、更新を簡単にしたいな〜と思ったのだった。

microcms.io

APIスキーマ

今回作るのは、タイトルすら不要なサイト。テキストエリアだけ。

  • フィールドID:textField
  • 表示名:内容
  • 種類:テキストエリア

ちなみに「テキストエリア」にはHTMLタグを含めることができる。

JSONデータをブラウザで表示させる

スクリプト

本当に基礎がわかっておらず、めちゃめちゃ苦労したのだった

window.addEventListener('DOMContentLoaded', function(){
getJsonData();
});

function getJsonData(){
       fetch(
           "https://〜〜〜.microcms.io/api/v1/content?limit=50",
           {
             headers: {
               "X-API-KEY": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX"
             }
           })
         .then(function(data){
          return data.json();
         })
         .then(function(myjson){
         for (const i in myjson.contents) {
            const h = '<div class="block">' + myjson.contents[i].textField + "</div>";
            var element = document.getElementById("wrap");
            element.insertAdjacentHTML("beforeend", h);
           }
        });
}

微妙にjQueryを使っており、正直いらないが、面倒なのでこのままです。ひどい
jQueryのappend()だった部分をinsertAdjacentHTML()に変えたので、無事jQueryいらなくなった

cpoint-lab.co.jp

何がそんなに大変だったのか

JSONデータを見てみると入れ子構造になっており、
その中からピンポイントでtextFieldの値を取り出すのに苦労した。
配列とかJSの基本をわかってないからこうなるんだけど、
わからないものはわからない。今も正直よくわかってない…
やっぱり苦手だな

参考
techacademy.jp