LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@nstshirotays(NFT 城田)

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

Last updated at Posted at 2021-07-17

1. はじめに

料理レシピのメモからインスタグラム風のブログを作成します。

1.1 用意するもの

  • PaizaCloudのアカウント
  • 料理のレシピテキスト(Markdown , html)
  • 料理の写真

1.2 参考URL

2. 環境構築

2.1 PaizaCloudの起動

　いつものようにPaizaCloudを使って環境構築を行います。
image.png

2.2 サーバーの作成

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

image.png

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

　起動すると一瞬502が出ますが、しばらくするとWordpressのインストールセットアップ画面に遷移します。
image.png

　ここで、

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

インストール後にログイン画面がでますので、指定したパスワードでログインしましょう
image.png

ログインするとWordpressの管理画面に遷移しますので、設定にあるパーマネントリンクから共通設定を「基本」に変更しておきましょう。
image.png

変更したら、必ず「変更を保存」のボタンを押してください。
image.png

ついでにせっかくですから、サイトの概要も変更しておきましょう。設定の一般からキャッチフレーズを変更しておきます。ここでも画面をスクロールさせて「変更を保存」を押すことを忘れないでください。
image.png

3. レシピの投稿

　管理画面から投稿を選択します
image.png

　ここで新規追加ボタンを押すと投稿を行う事ができます。
image.png

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

3.1 レシピ素材（マークダウンファイル）の作成

　このQiitaの記事もそうですが、マークダウン記法によるテキストファイルは汎用性が高く、GitのReadmeなどでも作成・参照しますので、技術者であればその記法は覚えていて損はないと思います。
　ちなみに、私のお気に入りのエディタはTyporaです。

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

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

image.png

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

image.png

4. ブログのテーマを変更する

　ここで左上にあるFun Fun Cookingをクリックすると現状のブログが表示されます。

image.png

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

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

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

4.1 Bootstrap Template

　Bootstrapのテンプレートサイトは沢山ありますが、今回はFree & Premium Responsive Bootstrap Templates @ ThemeWagonを利用します。

image.png

　基本的には好きなものを選べばいいのですが、ここではSavoryというテンプレートを使います。
image.png

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

　ダウンロードしたファイルをPaizaCloudにアップロードします。
image.png

image.png

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

unzip Savory-gh-pages.zip

image.png

image.png

4.2 Wordpress Themeの作り方

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

① style.cssの作成

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

style.css
/*
Theme Name: Savory
*/

② header.phpの作成

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

cd Savory-gh-pages/
cp index.html header.php
  • header.phpの修正手順
手順 対象行 変更内容 変更前 変更後
1 75行目以降 削除 --- ---
2 2行目 langの変更 en ja
3 20行目 titleの変更 Title page
4 35行目
43行目		 文字の変更 Mashup Template
5 35,41,49 ルートの変更 ./index.html /
6 48-55 メニューの変更　 <ul>～</ul> '%3$s' ,'container' => 'False') ); ?>
7 15,16,22,42 パスの変更 ./　の2文字 /
8 61行目 コピーライト行削除 <p>© Untitled Website created.... ---
9 19行目 スタイル追加 --- <style> img {height: 100%;} </style>
10 45,46行目 コメント修正 <p> .... </p> <p></p>
11 22行目の後方 マクロ挿入 </head>の前部分
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の元ネタを作成します。

cd Savory-gh-pages/
cp index.html footer.php
  • footer.phpの修正
手順 対象行 変更内容 変更前 変更後
1 1～187行目まで 削除 --- ---
2 23行目 パスの変更 ./　の2文字 /
3 23行目の後方 マクロ挿入 </body>の前部分
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の元ネタを作成します。

cd Savory-gh-pages/
cp index.html index.php
  • index.phpの修正
手順 対象行 変更内容 変更前 変更後
1 74行目まで 削除 --- ---
2 114行目以降 削除 </main>以降の行 ---
3 先頭行 マクロ挿入 ---
4 最終行 マクロ挿入 ---

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

    <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

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

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

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

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

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

    $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;

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

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の作成

　コメントを表示するテンプレートになります。

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の作成

　個別のレシピを表示するテンプレートになります。

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の作成

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

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ディレクトリに丸ごとコピーします。

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

image.png

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

image.png

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

image.png

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

image.png

image.png

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

image.png

image.png

image.png

最後に

　いかがだったでしょうか。Wordpressは色々な方が解説記事をかいていますし、素晴らしいThemeファイルも一杯あるのですが、手作りで好みに変えていくのも楽しいかと思います。
　

次回は...

　LINEを使った情報共有ボットを作ろうかと考えています。また、ようやくブロックチェーンについてもサンプルが出来ましたので、近々アップしたいと思います。

記事一覧

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?