wordpress

#はじめに
自分用にwordpress開発のタグなどをまとめています。
かなり省略しているので、わかりづらい可能性があります。

#困ったらここを見ろ
[Wordpress codex](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)
Wordpressの公式？サイトのような物で、テンプレートタグについて必要な情報は全てここにある。
参照しながら作れる人は、これを見れば良きです！

#インストール推奨プラグイン
・Query Monitor

#スニペット登録で爆速コーディングが出来るので登録しておくと吉。

[Alfred]
[Dash](https://kapeli.com/dash)

#テンプレートタグのパスを通す
###header.php

```header.php
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title><?php the_title(); ?></title>
<?php wp_head(); ?>

```

####footer.php
```footer.php
<script src="<?php echo get_template_directory_uri(); ?>js/script.js"></script>
```

#####解説
・titleタグの中は、コンテンツの内容によってタイトルが変更できるよう、`<?php the_title(); ?>`を記載する
・linkのパスを通す為、`<?php echo get_template_directory_uri(); ?>`を記載する
・httpでもhttpsでもパスが通るようにする為、　http/https共に削除して//から始まるようにしておく。
　


#全ページ共通で同デザインのヘッダーナビや、フッターなども共通パーツ化する

１）まずincludesというフォルダを作り、header.php, footer.phpを作成
headerタグの中身や、footerタグの中身をそれぞれのファイルに入れておく

2) includesに写したファイルが読み込めるよう、 
index.phpやsingle.phpに以下を記述
`<?php get_template_part('includes/header')?>`
`<?php get_template_part('includes/footer')?>`

#それぞれの投稿データをとってこれるようにするループ処理
wordpressでは、ブログ投稿機能があるので「①」という投稿内容がクリックされたら「①」の、「②」という投稿内容がクリックされたら「②」の、投稿データ(タイトル、投稿日、投稿内容など)が表示されるようにされなければならない。(プログラミングっぽいところ！!)

```shingle.php
    <?php get_template_part('includes/header') ?>
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php the_title(); ?>

            <!-- アイキャッチ画像の表示・アイキャッチ画像が変更されても、idのデータをとってきて、変更された画像が表示できるようにする -->
            <?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'large_size' ); } ?>
            <?php the_content(); ?>
        <?php endwhile; ?>
    <?php endif ?>
    <?php get_template_part('includes/footer') ?>

    <?php get_footer(); ?>
```

下記のように<?php endwhile; ?>と<?php endif ?>の間に、記事がなかった場合の処理を書いておくのもいいが、wordpressではほぼそう言ったことはないのでバグを回避するためのendifだけでok

```shingle.php
        <?php endwhile; ?>
        <?php else; ?>
            <p>記事が見つかりませんでした</p>
    <?php endif ?>
```

#アイキャッチ画像を表示できるようにする

wordpressのデフォルトのサポートだと、管理画面からアイキャッチ画像が設定できるようになっていないので、追加できるようにする。(以下画像参照。デフォルトだとこのフックがない)

![スクリーンショット 2021-02-23 12.37.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/e833e67c-b66d-8167-7fe0-8e79c479f961.png)

functions.phpという名前のファイルを作成。
※functions.phpはアイキャッチ画像以外にも、「フック」というのが記述できる場所になる。


```functions.php
<?php
// ここでアイキャッチ画像を設定できるように宣言。ファイル名は必ずfunction"s"
add_action('init', function() {
    add_theme_support('post-thumbnails');
}); 
```

(すでに前項で記述してしまっているが)各投稿ページをとってくるsingle.phpにも、管理画面から設定されたアイキャッチ画像のデータをとってきて、表示できるようにする。

```single.php
//idをとってくる
$id = get_post_thumbnail_id(); 
//idを取得して、その画像を返す
$img = wp_get_attachment_image_src($id);`
```
・[wp_get_attachment_image_srcはメディアライブラリに投稿されたデータをとってくるタグ](https://bityl.co/5iQH)

・[the post thumbnailはサムネイル画像を表示するタグ](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/the_post_thumbnail)を参照


###言語設定をとってこれるようにする。
`<html lang="ja">`を、動的に変更するため、`<html <?php language_attributes(); ?>>`に変更。

###bodyタグに、<?php body_class(); ?>を追加
`<body <?php body_class(); ?>>`
これを記載しておくことで、ログインしてるのかしてないのかで、管理バーが表示されたりされなかったりするように。

###bodyタグの直後に<?php wp_body_open(); ?>を追加。
`<?php wp_body_open(); ?>`
Googleタグマネージャーなどが導入された場合に、bodyタグの直後にそれを読み込めるようにするタグ。

includesのheader.phpに書いてもok.

#パーマリンクを管理画面からカスタム構造にしておくと吉
管理画面 > 設定 > パーマリンク設定 > カスタム構造を`/%year%/%monthnum%/%day%/`に。

#その他プラグインなど
###Wordpress問い合わせフォームのスパム対策
・[問い合わせスパムにうんざり。ContactForm7に「私はロボットではありません」と表示させる「reCAPTCHA」の設定方法](https://www.vektor-inc.co.jp/post/recaptcha/)