1. TOP
  2. Tech
  3. ワードプレス初心者向けカスタマイズ方法

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

公開日:2022-01-10 最終更新日:2022-03-09

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

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

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

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

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

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

日付をカスタマイズ

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

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


.meta-text{display:none}

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


<?php
function koushin(){
    $str.='公開日:'.get_the_date().'<br/>'.'最終更新日:'.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やアクションフックを使えば、ワードプレスを自由にカスタマイズ出来ます。見た目を良くする、構造化データを作る、など用途は様々です。是非色々と試してみて下さい。

以上、参考にしてみて下さい。