KAGO WEB
  • Job
  • Health
  • Dating
  • Tech
  • Music
  • Tennis
  • Life
    1. TOP
    2. Tech
    3. ワードプレス初心者向けカスタマイズ方法

    ワードプレス初心者向けカスタマイズ方法

    最終更新日:2022-03-09

    wordpress-shoshinsha-customize

    ブログと言えばワードプレスですよね。私も始めたての頃はワードプレスを使っていました。ワードプレスの場合、文章を書くだけでブログをアップロード出来ます。htmlやphpを自分で用意する必要も無く、ブログを書くことに注力出来ます。とはいえ、多少なりともカスタマイズをすればもっと使いやすくなりますよ。

    ワードプレス初心者向けカスタマイズ方法

    ワードプレスのカスタマイズは、基本的にCSSとアクションフックで行います。CSSは、追加CSSに書いていけば簡単です。ここに書いてあるものが、他のCSSより優先されます。

    一方、アクションフックは子テーマを用意し、そこに書いていくことになります。CSSと違い一手間必要です。うーん、子テーマ?慣れていないと少し戸惑うかもしれません。でも、安心してください。公式サイトを見ながら作れば問題ありません。

    (参考)ワードプレスCodexのページ

    なお、テーマのバージョンによって変数名が変わります。下記は全てTwentyTwentyというテーマを使っているので、ご了承下さい。

    日付をカスタマイズ

    TwentyTwentyのテーマでは、デフォルトで記事に日付が表示されます。ただし、日付にハイパーリンクが付いているんですよね。何とか消したかったため、元々の日付を非表示にし、新たに自分で作った日付を足しました。

    まず、追加CSSでデフォルトの日付を非表示にします。

    
    .meta-text{display:none}
    
    

    子テーマのfunctions にkoushinという変数を作ります。

    
    <?php
    function koushin(){
        $str.='最終更新日:'.get_the_modified_date();
        echo '<p style="font-size:1.7rem;">'.$str.'</p>';
    }
    ?>
    
    

    私はAdInserterというプラグインを使っていました。Before contentsに下記を入れて下さい。

    
    <?php koushin(); ?>
    
    

    アイキャッチの画像サイズを変える

    AMPで運用するため、画像サイズを1200x675pxにする必要がありました。ところが、TwentyTwentyではデフォルトでかなり大きく表示されてしまいます。そこで、追加CSSでサイズを変更するようにしました。下の例では、記事ページとカテゴリーページのアイキャッチを対象としています。

    
    .featured-media{display:none}
    .singular .featured-media-inner {
        position: relative;
        left: calc(50% - 50vw);
        width: 100vw;
        max-width: 40rem;
    }
    .archive .featured-media-inner {
        position: relative;
        left: calc(50% - 50vw);
        width: 100vw;
        max-width: 40rem;
    }
    
    

    構造化データ付きパンくずリストを作成

    パンくずリストにも構造化データを付けた方が良いそうで、アクションフックで作成する事にしました。まずは子テーマのfunctionsにbreadcrumbという変数を作ります。

    
    <?php
    function breadcrumb(){
        global $post;
        $str ='';
        if(!is_home()&&!is_admin()){
            $str.= '<div itemscope itemtype="http://schema.org/BreadcrumbList">';
            $str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
            $str.= '<meta itemprop="position" content="1">';
            $str.= '<a itemprop="item" href="'. home_url() .'"><span itemprop="name">HOME</span></a> &gt;&#160;</div>';	
                if(is_page()){
                    if($post -> post_parent != 0 ){
                        $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                        foreach($ancestors as $ancestor){
                            $str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
    	                    $str.= '<meta itemprop="position" content="2">';
                            $str.= '<a href="'. get_permalink($ancestor).'" itemprop="item"><span itemprop="name">'. get_the_title($ancestor) .'</span></a> &gt;&#160;</div>';
                        }
                    }	
                } elseif(is_single()){
                    $categories = get_the_category($post->ID);
                    $cat = $categories[0];
                    if($cat -> parent != 0){
                        $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                        foreach($ancestors as $ancestor){
    		                $str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
    		                $str.= '<meta itemprop="position" content="2">';
    		                $str.= '<a href="'. get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'. get_cat_name($ancestor). '</span></a>→</div>';
                        }
                    }
                $str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
                $str.= '<meta itemprop="position" content="2">';
                $str.= '<a href="'. get_category_link($cat -> term_id). '" itemprop="item"><span itemprop="name">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';		
                }
            $str.='<div>'. wp_title('', false) .'</div>';
        }
        echo $str;
    }
    ?>
    
    

    AdInserterというプラグインを使っていれば、blockに下記を入れれば表示されます。場所はお好みで。

    
    <?php breadcrumb(); ?>
    
    

    AMPプラグインのリダイレクトエラー

    AMPプラグイン使用時にリダイレクトが発生する処理を行うと、下記のエラーが出ます。

    サーバーのレスポンスが ok でも、送信が処理されていない場合があります。 このフォーム処理機能の開発者に連絡して、このメッセージを改善してください。

    これは、サーバーからのレスポンスをjsonで判定するようにすれば解決します。子テーマのfunctionsに下記を入力すると、エラーなしでリダイレクトします。

    
    <?php
    function jsoncheck(){
        if ( wp_is_json_request() ) {
            if ( $success ) {
            $message = __( 'ok!', 'my-textdomain' ); } else { $message = __( 'ng!', 'my-textdomain' );
            }
        wp_send_json( compact( 'message' ), $success ? 200 : 400 );
        }
    }
    add_action('template_redirect','jsoncheck');?>
    ?>
    
    

    googleの構造化データを作成

    AMPプラグインを使用していると、サーチコンソールで構造化データのエラーが出ます。publisher name, publisher logoのURLが指定されていないという内容です。そこで、子テーマのfunctionsに下記を入力してpublisher nameとlogo urlを追加します。

    
    <php?
    add_filter( 'amp_post_template_metadata', 'xyz',10,2);
    function xyz( $metadata, $post ) {
        $metadata['publisher']['name'] = 'なまえを入れてください';
        $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => 'ロゴ画像のurlを入れてください',
        );
        return $metadata;
    }
    ?>
    
    

    終わりに

    追加CSSやアクションフックを使えば、ワードプレスを自由にカスタマイズ出来ます。見た目を良くする、構造化データを作る、など用途は様々です。是非色々と試してみて下さい。