未経験から副業で稼げるWebデザイン講座 #23 HTMLをPHP化しよう

↓初回はこちら↓

未経験から副業で稼げるWebデザイン講座 #0 講座概要

前回の復習

前回はwordpressに必要な環境をそろえるためにLocalをインストールしました。

未経験から副業で稼げるWebデザイン講座 #22 WordPress開発環境準備

今回はwordpress用のファイルを作ります

今回は今まで制作してきたHTML＆CSSを、wordpress用の形式に作り直していきます。まずはフォルダ”portfolio(theme)”を作成し、下記のファイルを新規作成します。

  • header.php
  • front-page.php
  • footer.php
  • index.php

次に下記ファイルおよびフォルダをコピーして持ってきます。

  • images（フォルダ）
  • style.css
  • reset.css

これでファイルの準備は完了です。

header.phpの作成

次にheader.phpを作り込んでいきましょう。
index.htmlの<!DOCTYPE html>から<body>までをコピーします。

<body>までをheader.phpにコピー

コピーができたら下記を記述していきます。

  • ファイルのパスには頭に<?php echo esc_url(get_theme_file_uri()); ?>/
  • </head>の直前に<?php wp_head();?>

これでheader.phpの準備は完了です。

front-page.phpの作成

次にfront-page.phpを作り込んでいきましょう。
index.htmlの<body>の直後から</body>の直前までをコピーします。

</body>の直前までコピー

コピーができたら下記を記述していきます。

  • ファイルのパスには頭に<?php echo esc_url(get_theme_file_uri()); ?>/
  • 一番最初の行に<?php get_header();?>
  • 一番最後の行に<?php get_footer();?>

これでfront-page.phpの準備は完了です

footer.phpの作成

最後にfooter.phpを作り込んでいきましょう。
index.htmlの</body>から</html>までをコピーします。

コピーができたら下記を記述していきます。

  • </body>の直前に<?php wp_footer();?>

これでfooter.phpの準備は完了です。

今回の復習

  • 新しいフォルダを作ってheader.php、front-page.php、footer.phpを新規作成
  • imagesフォルダやstyle.css、reset.cssをコピーして持ってくる
  • ファイルのパスには頭に<?php echo esc_url(get_theme_file_uri()); ?>/
  • </head>の直前に<?php wp_head();?>
  • front-page.phpの最初の行に<?php get_header();?>、最後の行に<?php get_footer();?>
  • </body>の直前に<?php wp_footer();?>

これらを頭に入れていただければOKです。
また今回の正確なコードが欲しい方は、記事の一番下に用意いたしましたので、参考にしてみてください。

いかがでしたか？
だんだんとできることが増えている実感はありませんか？
WordPressができれば副業で大きく稼ぐことができますよ！

これからも皆さんの夢の実現に向けて頑張っていきましょう！

↓次の回はこちら↓

未経験から副業で稼げるWebデザイン講座 #24 テーマを反映させよう

↓正確なコードはこちら↓

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="<?php echo esc_url(get_theme_file_uri()); ?>/reset.css">
    <link rel="stylesheet" href="<?php echo esc_url(get_theme_file_uri()); ?>/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Zen+Kaku+Gothic+New&display=swap" rel="stylesheet">
    <?php wp_head();?>
</head>
<body>

front-page.php

 <?php get_header();?>
    <div class="top">
        <div class="top_left">
            <div class="top_left_inner">
                <h1 class="cormorant-garamond-medium">Portfolio</h1>
                <p class="cormorant-garamond-light">Web designer</p>
                <p class="zen-kaku_gothic_new-regular">小林 千晶</p>
                <p class="small zen-kaku_gothic_new-regular">Ⓒ Chiaki Kobayashi. All rights reserved.</p>
            </div>
        </div>
        <div class="top_right">
            <img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/top.jpg" alt="トップ画像">
        </div>
    </div>
    <div class="about">
        <div class="about_left">
            <img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/profile.jpg">
        </div>
        <div class="about_right">
            <div class="about_right_inner">
                <h2 class="cormorant-garamond-medium">Chiaki<br>Kobayashi</h2>
                <p class="cormorant-garamond-medium large">Web designer since 2024</p>
                <p class="zen-kaku_gothic_new-regular">1994年北海道生まれ、東京都在住<br>
                    芸術大学デッサン学科卒業後、アシスタントを経て<br>
                    フリーランスのWebデザイナーに。<br>
                    <br>
                    雑誌、企業サイト、広告などで活動中</p>
                <p class="small zen-kaku_gothic_new-regular">©  Chiaki Kobayashi. All rights reserved.</p>
            </div>
        </div>
    </div>
    <div class="portfolio">
        <div class="portfolio_title cormorant-garamond-medium large">
            <h2>Portfolio</h2>
        </div>
        <div class="portfolio_works">
            <div class="portfolio_image"><a href="#"><img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/portfolio01.jpg"></a></div>
            <div class="portfolio_image"><a href="#"><img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/portfolio02.jpg"></a></div>
            <div class="portfolio_image"><a href="#"><img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/portfolio03.jpg"></a></div>
            <div class="portfolio_image"><a href="#"><img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/portfolio04.jpg"></a></div>
            <div class="portfolio_image"><a href="#"><img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/portfolio05.jpg"></a></div>
            <div class="portfolio_image"><a href="#"><img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/portfolio06.jpg"></a></div>
        </div>
    </div>
    <div class="footer">
        <h2 class="cormorant-garamond-medium large">Contact</h2>
        <p class="zen-kaku_gothic_new-regular">hello@subarashiisaito.jp</p>
        <p class="zen-kaku_gothic_new-regular">01-2345-6789</p>
        <p class="zen-kaku_gothic_new-regular">instagram @subarashiisaito</p>
        <p class="zen-kaku_gothic_new-regular">twitter @subarashiisaito</p>
        <p class="small zen-kaku_gothic_new-regular">©  Chiaki Kobayashi. All rights reserved.</p>
        <div class="footer_img">
            <img src="<?php echo esc_url(get_theme_file_uri()); ?>/images/footer.jpg">
        </div>
    </div>
<?php get_footer();?>

footer.php

    <?php wp_footer();?>
</body>
</html>

関連記事

コメント

この記事へのコメントはありません。

TOP
TOP