【WordPress】メイン画面に関わる関数や記述まとめ/index.php

2021.04.26

ぶっちゃけWordPressをなめてました。。。独自テーマを作れるようになるにも一苦労で、オブジェクトでのコーディングや、ブロックを作れるようにするとなるとReactの知識も入ってくる、といったように内部構造が想像以上に複雑です。

まずは、細かなところは置いておいて、WEBサイトを構成する上で必須になるパーツから手を付ける事にしました。

以下、記事というよりも備忘録です。必要パーツに用いられる関数やその制御をどのようにしたら良いか、カスタマイズする上での参考サイトを書きます。

個別ページ（single.php）に用いられる関数はこちらをご参照ください。↓

【WordPress】個別記事に関わる関数/single.php
index.php関連はこちら↓ 投稿した記事に用いられる関数のメモを残します。 WordPressテンプレート階層 まず事前に、WPにはテンプレート階層が存在し、ファイル名によって表示するページのテンプレートが決まるようになっています。つ...
morymory.com
2021.04.30
スポンサーリンク

WPの基本的な関数/主にheader,footer内で使われる関数

  1. get_stylesheet_uri()
    cssを読み込む際に使用する関数。文字列での出力をするためにechoとあわせて使用する。
  2. get_template_directory_uri()
    有効化しているテーマのディレクトリを取得する関数。1と同様に文字列で出力をするためにechoとあわせて使用する。
  3. wp_title()
    タイトルの表示
  4. bloginfo()
    ブログ情報を出力する関数。引数にパラメータを入れる事で、エンコーディングやブログタイトルを表示できる。
    パラメータ一覧：https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/bloginfo
  5. wp_head()
    header.phpの<head></head>内に必ず挿入する
  6. body_class()
    ページの種類ごとに異なるクラス名を出力する関数
  7. wp_footer()
    footer.phpの</body>直前に必ず挿入する
  8. home_url()
    WebサイトのホームURLを取得する関数。
    デフォルトではURLの最後に”/”が付かないので、home_url(‘/’)と引数に加える。
    注）この関数は、管理設定の設定＞一般＞サイトアドレスを参照して取得するため、エスケープをさせる必要がある。
    ～エスケープ方法～
    esc_url()でエスケープさせることが可能。
<?php echo esc_url(home_url('/')); ?>

　　＞home_url()についての詳細

jQueryの呼び出し方

えええええ？jQuery?!オワコンじゃないの？

といった声が聞こえて来そうですが・・・WordPressには、jQueryが使われていおり、ライブラリが内包されています。

友人のエンジニアに聞いたところ、今でも開発期間が短いフロント開発にはjQueryが用いられるそうです。

私も実際、過去の「JavaでJSONファイルを送受信する」という記事の中でjQueryを使用しております。
ネイティブなJavaScriptに比べて、やはり短文で手軽に書くことができるのです。

では、本題に戻しまして、WPサイトでのjQueryの呼び出し方法です。

通常、jQueryを読み込む時は、ライブラリをサーバーに置くかCDNで読み込むかですが、WPの場合は内包されているので、functions.phpに以下のコードを記載します。

<?php
// jQueryの呼び出し
function use_scripts(){
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts','use_scripts');
?>

複数のjsファイルを読み込む場合はこのように記載します。
origin.jsという名のjsファイルを作成したので、追加で読み込みます。

<?php
// jQuery+複数jsファイルの呼び出し
function use_scripts(){
    wp_enqueue_script('jquery');
    wp_enqueue_script('javascript',get_template_directory_uri(  ).'/js/origin.js',array('jquery'));
}
add_action('wp_enqueue_scripts','use_scripts');
?>

上記コードをfunctionsに記載する事で、head内でscriptの読み込みコードが出現します。

jQueryの将来性についてですが、個人的に利用場面が少なくなってくるのかなと感じております。
CSS＋ネイティブJSでかなりのAnimationが実装可能ですし、ブロックエディタはReactで作られているといった事を考えるとjQueryを使う場面って少なくなるかも。。。
jQueryの将来性について、こちらの記事が参考になります。
https://capitalp.jp/2020/06/30/latest-jquery-is-coming/

トップページによく使われる関数/index.php

  1. get_header()/get_footer()
    それぞれheader.phpとfooter.phpを読み込む。
    メインコンテンツ（headerとfooter以外）は、<main></main>内に記述する。

お知らせ欄などの記事の表示

if構文とwhile構文で記事の表示をloopさせます。
記事の検索には、WP関数のhave_posts(),have_post()を使用します。

have_posts() → 次の記事があるか調べる
the_post() → 次の記事を取得する

<?php
  if(have_posts()):
    while(have_posts()) : the_post();
    ?>
	//　記事を表示させるHTML
    <?php
    endwhile;
  else:
  ?>
　　    //  記事がみつからない時の記述HTML
<?php 
  endif;
?>

記事を表示させる部分に、記事のタイトルや内容の抜粋、日時などを表示させるコードを追記していきます。

記事表示に使える関数

1.the_title()
記事のタイトルを表示させる関数

2.the_permalink()
記事へのリンク先を付与する関数。<a>タグのhref=””内に記述する

3.the_time()
記事の日時を表示。引数に‘Y年n月j日’を入れる事で表示形式の変更が可能。
時間を表示したい場合は、the_time(‘g:i a’);とすることで表示可能。
日時と時間を連結した文字列で表示させたい時の例。

<?php the_time('Y年n月j日'); ?> @ <?php the_time('g:i a'); ?>

4.the_category()
記事のカテゴリーを表示する時に使用。
引数に何もいれない状態では、リスト形式で書き出されるため、(‘,’)とカンマで表示されるように引数を設定する。

5.the_excerpt()
記事の内容の冒頭110文字を出力する関数。
<p>タグで書き出しされるため、HTMLで囲わなくてOK！

5-1.the_excerpt()で表示される文字数を制限する場合
　（１）WP Multibyte Patchプラグインをインストールして「有効」にする。
　　　　※無効時に検証したところ、文字制限が効きましたが念のためプラグインは入れておいた方が無難です。特に日本語は。
　（２）function.phpに以下のコードを追加する。（文字数はフィルターで制御します）
　　　　return の数字がthe_excetpt()で出力される文字数となります。
　　　　この記述に関しての参考記事：https://thewppress.com/libraries/change-the-excerpt-length-and-excerpt-more/

<?php
function change_excerpt_lenght($length){
    return 10;
}
add_filter('excerpt_length','change_excerpt_lenght',999);
?>

5-2.the_excerpt()の[…]表記を変更してリンクをつける
　（１）function.phpに以下のコードを追加する。
　　　　下記コード中のesc_urlとはURLをサニタイズする（エスケープ）役目を果たします。詳しくはこちら（Codexに飛びます）。

<?php
function change_excerpt_more($post){
    return '<a href="'.esc_url(get_permalink()).'">'.'続きを読む'.'</a>';
}
add_filter('excerpt_more','change_excerpt_more');
?>

サムネイルの表示

index.phpの記事一覧にサムネイルを表示したい時に行う設定。
サムネは、　管理画面の　記事＞アイキャッチ　で選択された画像が表示される。
アイキャッチ用にuploadした画像は、WP上で自動的に’thumbnail’, ‘medium’, ‘large’, ‘full’にリサイズされて、それぞれが下記フォルダに格納される。
\app\public\wp-content\uploads\●●●●

リサイズ設定の変更は、管理画面の設定＞メディア　から設定可能。
アイキャッチ画像についてのcodexリンク

functions.phpにサムネ表示の設定を追加する

まず、functions.phpに下記コードを追記。

<?php
// サムネイルの表示
add_theme_support( 'post-thumbnails' );
?>
the_post_thumbnail()/has_post_thumnail()

has_post_thumnail()…アイキャッチ画像が設定されているか確認する関数。
the_post_thumbnail()…アイキャッチ画像をimgタグで出力する関数。

if構文でアイキャッチ画像があれば表示、画像がなければ指定の画像を表示というコードを記載。
the_post_thumbnail()の引数には、WPが自動的にリサイズしてくれる’thumbnail’, ‘medium’, ‘large’, ‘full’を入れる事が可能。

the_post_thumbnail()は任意のクラス名を指定しない限り「class=”attachment-thumbnail”」として書き出しが行われる。
notimage出力時もCSSが適用されるように、notimageのimgタグに「class=”attachment-thumbnail”」とclass名を付与する。

<?php 
   if(has_post_thumbnail(  )){
      the_post_thumbnail( 'thumbnail' );
    }else{
?>
   <img src="<?php echo get_template_directory_uri(); ?>/images/notimage.jpg" alt="no image" class="attachment-thumbnail">
<?php } ?>

ページジャー/ページ送りの表示とカスタマイズ

Admin管理画面の　設定　＞　表示設定　でトップに表示させる記事の数を変更する。

the_posts_pagination()関数でページジャーが表示されます。
自動的にHTMLが出力されるため、HTMLで囲わなくてもOKです。

問題なのが、自動的に「投稿ナビゲーション」という表示がされてしまいます。
コードを見てみると、<nav></nav>内にこのように出力されています。

<h2 class="screen-reader-text">投稿ナビゲーション</h2>

function.phpで消す事もできますが、
・記述が長くなる
・面倒くさい
ので、cssで消すことがオススメです。
function.phpでカスタマイズを試したい方は、参考記事を共有します。
function記述参考記事：https://gokansoichiro.com/blog/page-nation/

cssで消す方法は、自動書き出しされたh2をdisplay:none;で非表示にします。たったこれだけで表示が消えます。

.pagination h2.screen-reader-text{
    display: none;
}

次の記事は、個別ページ(single.php）の関数です↓

【WordPress】個別記事に関わる関数/single.php
index.php関連はこちら↓ 投稿した記事に用いられる関数のメモを残します。 WordPressテンプレート階層 まず事前に、WPにはテンプレート階層が存在し、ファイル名によって表示するページのテンプレートが決まるようになっています。つ...
morymory.com
2021.04.30
スポンサーリンク
タイトルとURLをコピーしました