Insta風レシピブログの作成（BootstrapのテンプレートをWordpressのThemeにする）

## 1. はじめに
 料理レシピのメモからインスタグラム風のブログを作成します。

### 1.1 用意するもの
 + PaizaCloudのアカウント
 + 料理のレシピテキスト(Markdown , html)
 + 料理の写真

### 1.2 参考URL
 + [Free & Premium Responsive Bootstrap Templates @ ThemeWagon](https://themewagon.com/)
 + [WordPress Codex 日本語版](http://wpdocs.osdn.jp/Main_Page)
 + [【テーマ自作】WordPress オリジナルテーマの作り方と基本 - WEBST8のブログ](https://webst8.com/blog/wordpress-theme-howto-make/)
 + [WordPressのテーマを自作する方法解説！必要なファイルとそれぞれでよく使う内容例ご紹介](http://galileo-venus.com/2020/05/29/20200525_wpthema/)
 + [[WordPress]コメントが表示されない場合の対処法 - WebMemo](https://webmemo.work/comment-display/)
 + [WordPress get_children()で投稿内の画像情報を取得する - doli blog](http://blog.doli.jp/blog/2014/post791/)
 + [WordPressでアイキャッチ画像のURLだけを取得してイメージタグに属性を追加する方法 - それからデザイン スタッフブログ](https://sole-color-blog.com/blog/60/)
 + [添付ファイルのテンプレート（image.php）での画像の出力 - Web Design Leaves](https://www.webdesignleaves.com/wp/wordpress/166/)

## 2. 環境構築

### 2.1 PaizaCloudの起動
　いつものように[PaizaCloud](https://paiza.cloud/ja/)を使って環境構築を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/fb517859-0c49-a95b-b870-c20528ed2f6e.png)


### 2.2 サーバーの作成
　シンプルにWordPressを選択して新規サーバー作成ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/d6bd08de-15cc-0c01-575b-985707f90030.png)

　なお、このサーバーは24時間が過ぎると削除されてしまいますので、永続的に起動しておきたい場合は、有料の契約に移行するか別途ホスティングサービスを契約する必要があります。
　

　起動すると一瞬502が出ますが、しばらくするとWordpressのインストールセットアップ画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/81b92fea-63a5-45d8-f08d-d9cfb74093c4.png)

　ここで、
 + 言語設定
 + サイトのタイトル
 + ユーザー名
 + パスワード
 + メールアドレス
 + を入れるとWordpressがインストールされます。

インストール後にログイン画面がでますので、指定したパスワードでログインしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/400cf5b6-f7df-6437-80b0-903b88620a21.png)

ログインするとWordpressの管理画面に遷移しますので、設定にあるパーマネントリンクから共通設定を「基本」に変更しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/d4c796e5-88aa-dd57-e77d-9a4c2c87de96.png)

変更したら、必ず「変更を保存」のボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/169514c7-42d3-a7b8-e6f2-7da0c86193b3.png)

ついでにせっかくですから、サイトの概要も変更しておきましょう。設定の一般からキャッチフレーズを変更しておきます。ここでも画面をスクロールさせて「変更を保存」を押すことを忘れないでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/7f9971d3-f3c2-13ea-877e-2b8d9e465000.png)

## 3. レシピの投稿

　管理画面から投稿を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/04bbcd91-e1a8-3b84-bb40-35f77fc848b8.png)

　ここで新規追加ボタンを押すと投稿を行う事ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/d57f279f-21ee-4901-318b-303f71f4d7d3.png)

　ここでWordpressオリジナルの内臓エディタ（ブロックエディタ）を使ってレシピを入れてもいいのですが、ここでは別の方法でコンテンツを追加したいと思います。

### 3.1 レシピ素材（マークダウンファイル）の作成
　このQiitaの記事もそうですが、マークダウン記法によるテキストファイルは汎用性が高く、GitのReadmeなどでも作成・参照しますので、技術者であればその記法は覚えていて損はないと思います。
　ちなみに、私のお気に入りのエディタは[Typora](https://typora.io/)です。

```Markdown:Recipe.md
# 唐揚げ

### 材料（2人分）

| No   | 材料             | 単位   | 分量 |
| ---- | ---------------- | ------ | ---- |
| 1    | 鶏もも肉・皮付き | 1枚    | 320g |
| 2    | しょうがチューブ |        | 3cm  |
| 3    | にんにくチューブ |        | 3cm  |
| 4    | 塩               | 小さじ | 1/2  |
| 5    | こしょう         | 小さじ | 1/4  |
| 6    | 酒               | 大さじ | 1    |
| 7    | しょう油         | 小さじ | 1/2  |
| 8    | ごま油           | 大さじ | 1    |
| 9    | 小麦粉           | 大さじ | 2    |
| 10   | 片栗粉           | 大さじ | 2    |


### 作り方

#### 準備工程

1. 肉を広げて一口大に切る（1枚を6等分か8等分）
2. １０分ほど水につける（ジューシーになる）
3. ボールにあげる
4. 塩を入れて**もむ**
5. ニンニク・しょうがを入れて**もむ**
6. 酒・しょう油を入れて**もむ**
7. Zipロックに入れて冷蔵庫へ入れる
8. -------------   4から5時間　---------------
9. ボールに上げて、ごま油を練りこむ
10. 小麦粉を練りこむ
11. 別ボウルに片栗粉をいれ、水ですこし溶く

#### 揚げ工程

1. 160℃で3分
2. バットに上げて3分待つ（中に火を通す）
3. 180℃で1分（焼き色を付ける）

```
こんな感じでいくつかレシピと写真を合わせて整理しておきます。

### 3.2 Wordpressへの投稿

　マークダウン記法で書かれたテキストを、先ほどのWordpressの投稿画面にコピペします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/00fc3ac6-4787-00f5-925a-9936566a67da.png)

　これはテキストエディタで開いたレシピ文章をコピペしたものですが、マークダウンエディターでの整形された画面やブラウザのHTMLなどもコピペで投稿に反映できます。
　ただし写真は別に挿入する必要がありますので、ここで唐揚げの写真をドラッグアンドドロップで挿入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/52b46ac3-ad19-2f63-4156-78cb26cc5f96.png)

　これで投稿はできましたので、公開ボタンを２回押して保存を行ってください。
　保存後は左上にあるワードプレスのロゴマークWを押すと投稿一覧が表示されますので、ここで適宜投稿を増やしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/f457a834-14dc-5dfd-5919-4970287ccd6b.png)


## 4. ブログのテーマを変更する
　ここで左上にあるFun Fun Cookingをクリックすると現状のブログが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/ff21c404-eeac-e6d7-2b9e-46b87242a607.png)

　Wordpressのおかげで基本的な機能を備えたブログが出来上がりました。ここからはこのブログの表示テーマの変更を行っていきます。

　Wordpressはそもそもとして着せ替えが可能です。世界中で多くのThemeが作られており、無料から有料まで様々な選択肢があります。

　一方でレスポンシブとうことで、Bootstrapでも多くのテンプレートが存在します。今回はこのBootstrapのテンプレートをWordpressのThemeにしていきます。

### 4.1 Bootstrap Template
　Bootstrapのテンプレートサイトは沢山ありますが、今回は[Free & Premium Responsive Bootstrap Templates @ ThemeWagon](https://themewagon.com/)を利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/4cfc409f-cb49-ec3e-0d7b-4f685e804c17.png)

　基本的には好きなものを選べばいいのですが、ここでは[Savory](https://themewagon.com/themes/free-multi-page-html5-portfolio-template-free-download/)というテンプレートを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/76861fd5-1c40-2d84-61a9-ca51be9b4e22.png)

　Live Previewを見るとレスポンシブで写真がスライドするので、料理レシピの表示にはピッタリではないでしょうか。
　メールアドレスの登録を行うと、ファイル一式をダウンロードできるURLが送られてきます。

　ダウンロードしたファイルをPaizaCloudにアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/7f7b2278-0e30-9390-734a-d56b583efaf4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/7c8bce7f-35b1-fcf9-7e9b-be24ff73816a.png)

　ターミナルを開いてアップロードしたファイルを解凍します。

```shell
unzip Savory-gh-pages.zip
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/90ef939d-940a-4420-03f3-5330a4d5a5c4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/0e12b152-8914-4c1e-b0c2-0fcd2ee84379.png)


### 4.2 Wordpress Themeの作り方
　解凍されたテンプレートを元にThemeを作成していきます。
　先ほど解凍した Savory-gh-pagesに必要なファイルを作成していきます。


#### ① style.cssの作成
　テンプレートをThemeとして認識させるために下記のstyle.cssを作成します。

```css:style.css
/*
Theme Name: Savory
*/
```

#### ② header.phpの作成
 index.htmlをコピーしてheader.phpの元ネタを作成します。

```shell
cd Savory-gh-pages/
cp index.html header.php
```

 * header.phpの修正手順

| 手順 | 対象行 | 変更内容 | 変更前 | 変更後 |
| ---- | ------ | ------- | ------ | ---- |
| 1    | 75行目以降 | 削除 | --- | --- |
| 2    | 2行目 | langの変更 | en | ja |
| 3    | 20行目| titleの変更 | Title page | <?php echo get_bloginfo('name');?> |
| 4    | 35行目<br>43行目| 文字の変更| Mashup Template | <?php echo get_bloginfo('name');?> |
| 5    | 35,41,49| ルートの変更 | ./index.html | / |
| 6    | 48-55 | メニューの変更　| \<ul>～\</ul> | <?php wp_nav_menu( array( 'items_wrap' => '%3$s' ,'container' => 'False') ); ?> |
| 7    | 15,16,22,42 | パスの変更 | ./　の2文字 | <?php echo get_template_directory_uri(); ?>/ |
| 8    | 61行目 | コピーライト行削除 | \<p>© Untitled Website created.... | --- |
| 9    | 19行目 | スタイル追加 | --- | \<style> img {height: 100%;} \</style> |
| 10   | 45,46行目 | コメント修正 | \<p> .... \</p> | \<p><?php echo get_bloginfo('description');?>\</p> |
| 11   | 22行目の後方 | マクロ挿入 | \</head>の前部分 | <?php wp_head(); ?>|

```php:header.php
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <meta content="Page description" name="description">
  <meta name="google" content="notranslate" />
  <meta content="Mashup templates have been developped by Orson.io team" name="author">

  <!-- Disable tap highlight on IE -->
  <meta name="msapplication-tap-highlight" content="no">
  
  <link href="<?php echo get_template_directory_uri(); ?>/assets/apple-icon-180x180.png" rel="apple-touch-icon">
  <link href="<?php echo get_template_directory_uri(); ?>/assets/favicon.ico" rel="icon">


  <style> img {height: 100%;} </style>
  <title><?php echo get_bloginfo('name');?></title>  

<link href="<?php echo get_template_directory_uri(); ?>/main.82cfd66e.css" rel="stylesheet"><?php wp_head(); ?></head>

<body>

<!-- Add your content of header -->
<header class="">
  <div class="navbar navbar-default visible-xs">
    <button type="button" class="navbar-toggle collapsed">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="/" class="navbar-brand"><?php echo get_bloginfo('name');?></a>
  </div>

  <nav class="sidebar">
    <div class="navbar-collapse" id="navbar-collapse">
      <div class="site-header hidden-xs">
          <a class="site-brand" href="/" title="">
            <img class="img-responsive site-logo" alt="" src="<?php echo get_template_directory_uri(); ?>/assets/images/mashup-logo.svg">
            <?php echo get_bloginfo('name');?>
          </a>
        <p><?php echo get_bloginfo('description');?></p>
      </div>
      <?php wp_nav_menu( array( 'items_wrap' => '%3$s' ,'container' => 'False') ); ?>
      
      <nav class="nav-footer">
        <p class="nav-footer-social-buttons">
          <a class="fa-icon" href="https://www.instagram.com/" title="">
            <i class="fa fa-instagram"></i>
          </a>
          <a class="fa-icon" href="https://dribbble.com/" title="">
            <i class="fa fa-dribbble"></i>
          </a>
          <a class="fa-icon" href="https://twitter.com/" title="">
            <i class="fa fa-twitter"></i>
          </a>
        </p>
      </nav>  
    </div> 
  </nav>
</header>
<main class="" id="main-collapse">

```

#### ③ footer.phpの作成
 index.htmlをコピーしてfooter.phpの元ネタを作成します。

```shell
cd Savory-gh-pages/
cp index.html footer.php
```

 * footer.phpの修正

| 手順 | 対象行 | 変更内容 | 変更前 | 変更後 |
| ---- | ------ | ------- | ------ | ---- |
| 1    | 1～187行目まで | 削除 | --- | --- |
| 2    | 23行目 | パスの変更 | ./　の2文字 | <?php echo get_template_directory_uri(); ?>/ |
| 3    | 23行目の後方 | マクロ挿入 | \</body>の前部分 | <?php wp_footer(); ?>|

```php:footer.php
</main>

<script>
document.addEventListener("DOMContentLoaded", function (event) {
  navbarToggleSidebar();
  navActivePage();
});
</script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID 

<script>
  (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
  ga('create', 'UA-XXXXX-X', 'auto');
  ga('send', 'pageview');
</script>

--><script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/main.85741bff.js"></script><?php wp_footer(); ?></body>

</html>
```


#### ④ index.phpの作成
 index.htmlをコピーしてindex.phpの元ネタを作成します。

```shell
cd Savory-gh-pages/
cp index.html index.php
```

 * index.phpの修正

| 手順 | 対象行 | 変更内容 | 変更前 | 変更後 |
| ---- | ------ | ------- | ------ | ---- |
| 1    | 74行目まで | 削除 | --- | --- |
| 2    | 114行目以降 | 削除 | \</main>以降の行 | --- |
| 3    | 先頭行 | マクロ挿入 | --- | <?php get_header(); ?> |
| 4    | 最終行 | マクロ挿入 | --- | <?php get_footer(); ?> |

　ここで、htmlを見ると \<div class="grid-item">が繰り返し記述されています。これはテンプレートですので、この部分を繰り返し部分としてカスタマイズします。

```html
    <div class="grid-item">
      <img class="img-responsive" alt="" src="./assets/images/img-05.jpg">
      <a href="./project.html" class="project-description">
        <div class="project-text-holder">
          <div class="project-text-inner">
            <h3>Vivamus vestibulum</h3>
            <p>Discover more</p>
          </div>
        </div>
      </a>
    </div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/c5520f63-cdc8-51f3-eaea-311e2efab537.png)


　構造としては、imgタグで画像を表示して、aタグでリンク先を示し、h3タグでタイトル。その下にpタグで説明文という構成です。

　ということで、これをWordpressに格納されているコンテンツデータから取得します。その際の基本となるphpソースは下記の通りです。

```php
$myposts = get_posts();
foreach($myposts as $post):
    setup_postdata($post);
    ここに処理が入ります
endforeach;
wp_reset_postdata();
```

ここで、投稿のタイトルは the_title() 、日付は　the_time()で表示することができます。
ただし、添付された画像については、ここからさらに検索が必要となります。

postデータから画像のURIを抽出するには、一旦画像の添付一覧を取得し、そこから画像URIを持ってきています。

```php
    $post_id = $post->ID;

    $attachment_image = get_children(
        array(
            'post_parent'    => $post_id,
            'post_type'      => 'attachment',
            'post_mime_type' => 'image',
            'order'          => 'ASC',
            'numberposts'    => 1,
        )
    );

    if ($attachment_image):
        $attachment_id = array_keys($attachment_image);
        $imgsrc = wp_get_attachment_image_src($attachment_id[0],"full");
    else:
        イメージがなかった場合
    endif;
```

これらを組み合わせると最終的に下記の通りとなります。

```php:index.php
<?php get_header(); ?>
<!-- Add your site or app content here -->
 
<div class="hero-full-wrapper">
  <div class="grid">
  <div class="gutter-sizer"></div>
    <div class="grid-sizer"></div>
    
    <?php
    $myposts = get_posts();
    foreach($myposts as $post):
      setup_postdata($post);
      $post_id = $post->ID;
  
      $attachment_image = get_children(
        array(
          'post_parent'    => $post_id,
          'post_type'      => 'attachment',
          'post_mime_type' => 'image',
          'order'          => 'ASC',
          'numberposts'    => 1,
        )
      );
    ?>
    
    <div class="grid-item">
      <?php
      if ($attachment_image):
        $attachment_id = array_keys($attachment_image);
        $imgsrc = wp_get_attachment_image_src($attachment_id[0],"full");
      ?>
        <img class = "img-responsive" src="<?php echo $imgsrc[0]; ?>" alt="no-img"/>
      <?php else: ?>
        <img class = "img-responsive" src="<?php echo get_template_directory_uri(); ?>/assets/images/img-01.jpg" alt="no-img"/>
      <?php endif; ?>
      <a href="<?php echo get_permalink(); ?>" class="project-description">
        <div class="project-text-holder">
          <div class="project-text-inner">
            <h3><?php the_title(); ?></h3>
            <p><?php the_time('Y/m/d'); ?></p>
          </div>
        </div>
      </a>
    </div>

  <?php
  endforeach;
  wp_reset_postdata();
  ?>

  </div>
</div>


<script>
  document.addEventListener("DOMContentLoaded", function (event) {
     masonryBuild();
  });
</script>

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

#### ⑤ comments.phpの作成
　コメントを表示するテンプレートになります。

```php:comments.php
<?php if ( have_comments() ): ?>
  <h2>コメント</h2>
  <ul class="commentlist">
    <?php wp_list_comments('type=comment'); ?>
  </ul>
<?php endif; ?>
<?php comment_form(); ?>
```

#### ⑥ single.phpの作成
　個別のレシピを表示するテンプレートになります。

```php:single.php
<?php get_header(); ?>

  <h2 class="pagetitle"><?php the_title();?> (<?php the_time('Y/m/d');?>)</h2>
  
  <div class="entry-content">
  <?php
  if(have_posts()){
  	while(have_posts()){
  		the_post();
  		the_content();
  	}
  } 
  ?>
  </div>

  <?php comments_template(); ?>

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



#### ⑦ page.phpの作成

個別ページの表示用としてテンプレートを作成しておきます。今回の料理ブログでは使わないのですが、お知らせとか、自己紹介などの固定ページを表示できるようにします。

```php:page.php
<?php get_header(); ?>

<h2><?php the_title();?></h2>
<div class="entry-content">
<?php
if(have_posts()){
	while(have_posts()){
		the_post();
		the_content();
	}
} ?>
</div>

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

## 5. Themeの反映

　以上でテーマ用のファイルが全て作成されました。もとになったindex.htmlは不要なので削除すると、下記の７つのファイルがSavory-gh-pagesの下にできているはずです。
 * comments.php
 * footer.php
 * header.php
 * index.php
 * page.php
 * single.php
 * style.css

これらのファイルをwpのthemeディレクトリに丸ごとコピーします。

```shell
  sudo cp -r ~/Savory-gh-pages /var/www/html/wp-content/themes
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/93ba30ec-8d61-ea56-aed4-3d94f65c54f2.png)

　次にwordpressのダッシュボード画面から外観・テーマを選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/2d381c8d-0abe-be30-05ad-14c64afc2882.png)

　ここで、Savoryを有効にします（画像はでていませんが、Savoryと出ている帯の有効化ボタンをおします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/6fa43364-e0d7-58a1-1967-823c3fcb073c.png)

　サイトを再表示させて出来上がりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/0952b01c-52c1-f7ce-0560-738ac5827bc1.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/a78f08f1-c7c4-9dda-2456-a2fe98dc7694.png)

　ちなみに、この画面でサンプルページと出ている部分は、Wordpressの管理画面から固定ページの編集で変更することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/06af5d40-f799-b01e-0009-d449640dbcde.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/26a91eab-55d6-e30e-21f2-7bc07799ff2f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410751/4d35e721-9aa2-f6e7-b77f-3cd4f805bad7.png)


## 最後に
　いかがだったでしょうか。Wordpressは色々な方が解説記事をかいていますし、素晴らしいThemeファイルも一杯あるのですが、手作りで好みに変えていくのも楽しいかと思います。
　
### 次回は...
　LINEを使った情報共有ボットを作ろうかと考えています。また、ようやくブロックチェーンについてもサンプルが出来ましたので、近々アップしたいと思います。


### 記事一覧
https://qiita.com/nstshirotays/items/cb06863dc7288c0fed25

https://qiita.com/nstshirotays/items/e47374a8c35241853280

https://qiita.com/nstshirotays/items/174c46610e962a345d13

https://qiita.com/nstshirotays/items/7cf78fdb9be4c212fd31

https://qiita.com/nstshirotays/items/c113b62b791931303447

https://qiita.com/nstshirotays/items/075cffee06f3a50c01db

https://qiita.com/nstshirotays/items/d865c20c2a338110a73e