未経験ママのWebデザイン勉強法 WordPress化◇わたしの簡単解釈◇

WordPressを学ぶ

Twitterでの素敵なご縁から、Wordpressについて教えていただきました。

自分で作ったHTML・CSSファイルを使って、Wordpress化に挑戦!

そのときの備忘録です。

わたしの簡単Wordpress化解釈

WordPress化の手順について、わたしの理解で記載します。

あくまでわたしの理解です😅

  • このファイルの詳しいことは?
  • どういうこと?
  • PHP???

などなど、掘り下げていったら、頭から湯気が出てしまいそうなことは、今回は考えず、

ただただ、わたしの卒制で作っていた簡単なHTML・CSSで作ったサイトをWordpress化するためにしたことを記載します。

詳しいこと、知識の追加は今後するとして、純粋にWordpress化を目指します。

HTML・CSSでつくったサイトをWordpress化する

HTMLを分解→PHPファイルをつくる→組み立てる イメージ。

PHPフォルダに分解

HTMLファイルを各PHPファイルに分解する。

このとき、各PHPファイルを足したらHTMLの1ページになればOK

(HTML開始タグ・閉じタグがそれぞれPHPの別ファイルにあってもOK)

必要なPHPファイルは以下の通り。(サイト内で繰り返し使用するデザインを使えるようにまとめていく)

最低限必須ファイル

Wordoressを正常に動かすために上記ファイルは必須とのこと。

現実は、以下のファイルも取り入れながら作成する。

今回用意したファイル

  • front-page.php(TOPページ)
  • header-page.php(メニューバー部分)
  • page.php (固定(下層)ページ  同じデザイン部分の記載)

今後用意予定のファイル

  • single.php (投稿ページ ブログ投稿用)

PHPファイルを作成時にやること

この部分にはheader.phpファイルを持ってきてね!

ここは本文のPHPファイルね!

というような記述がそれぞれ必要になります。

1~3はPHPファイルを作成するときに追記したもの。

index.php

index.php

1, テンプレート名が記載されている。

<?php
/*
Template Name: index
*/
?>

2,

<?php get_header(); ?>  →header.phpをもってきね
<?php get_template_part(‘header-page’); ?> →header-page.phpをもってきてね

任意のファイルをもってくるとき<?php get_template_part(‘header-page’); ?>を使用する
https://on-ze.com/archives/1144

<?php if(have_posts()): while(have_posts()):the_post(); ?> →ループ 制御構文?難しいことは・・・
<?php the_content(); ?> →本文がくるよ!
<?php endwhile; endif; ?> →ループ終わり。

3,footer.phpをもってきてね!

<?php get_footer(); ?>

header.php

</head>タグ直前に下記のコードを追記する

https://meshikui.com/2018/08/10/586/

<?php wp_head(); ?>
</head>

footer.php

</body>タグ直前に下記のコードを追記する

https://meshikui.com/2018/08/10/586/  ※header.phpの参照リンクと同じ

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

fonction.php

今回は中身なし。

中身の記述がなくても、必須ファイル。

※fonction.phpとは?https://www.sejuku.net/blog/67450

HTMLをPHPファイルに分解するときに必要に応じてPHPコードをかく

ここが初心者には難しい・・・

今回は、見ていただきながらできたけど、違うサイトで果たしてできるのか・・・

style.cssに追加

必須:以下をStyle.cssにコメント追記 1行目or @charset “UTF-8”; の下に記述

https://olein-design.com/blog/template-style-css-file

/* Theme Name: テーマの名前(必須)
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ(カンマ区切り/オプション)
License: テーマのライセンス License URI: テーマのライセンスのURI */

Theme NameがWordpressで表示されるテーマ名になる

Worgpressインストール後

サーバーに落としたWordpressのファイルから

wp-content>thems のファイルを見つける。

thems のファイルに、用意したHTML・CSS・JSなど・PHPファイルを入れる

※リセットCSSやjQueryのファイルも一緒に入れる

WordPress画面から

WordPressの管理画面>外観>テーマにTheme名でつけたテーマが入っているので、有効化する

テーマを編集する

テーマエディター(テーマ編集)でPHPファイルの編集をする

外観>テーマエディター(テーマ編集)を開く

右側のテーマファイルに。アップロードしたファイルが一覧で表示される

header.php

フォルダ内にある、ファイルを読み込んでいる場合、PHPで読み込めるように、下記のコードを追加する。

追加:<?php echo get_template_directory_uri() ?>

http://wpcj.net/666

HTML(フォルダ内)

<!–style css–>
<link rel=”stylesheet” href=”CSS/style.css”>

header.php

<!–style css–>
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri() ?>/style.css”>

footer.php

jQueryファイルを読み込んでいる場合は、header.phpと同じようにリンクの記述が必要

<script src=”<?php echo get_template_directory_uri() ?>/js/J-query.js”></script>

ほかの.php

使用している写真が、フォルダから読み込んでいる場合は、heade/footerと同じように記述が必要

<img src=”<?php echo get_template_directory_uri() ?>/01TOP/img/IMG_2353.JPG” alt=”・・・”>

固定ページを作成

今回の場合、下層3ページを作成しました。

ダッシュボード>固定ページ>新規追加

タイトル:ページタイトルを入力

ブロックの追加から、PHPで読み込まない部分をHTMLでコピペする。

(今回の場合は、header・footer以外の本文)

各セクションごとor丸ごとコピペ。

写真

固定ページを編集する場合、写真はPHPファイルで読み込めないので、

メディア>新規追加 で使用する写真を追加し、リンクが表示されるので、写真のリンクをコピーして、リンクの置き換えが必要。

お問合せフォーム

プラグインをインストール

今回はContact Form 7をインストール

プラグイン>新規追加>Contact Form7を検索>インストール、有効化する

お問合せ

左側のい一覧に“✉︎お問い合わせ”が表示される

新規追加>お問い合わせを作成する。

HTML

<form class=”form” action=””>
<div class=”contact-item”>
<label class=”label” for=”name”>お名前<span class=”red”>*</span></label>
<input class=”inputs” type=”text” id=”name” name=”your-name” placeholder=”name”>
</div>

<div class=”contact-item”>
<label class=”label” for=”email”>メールアドレス<span class=”red”>*</span></label>
<input class=”inputs” type=”email” id=”email” name=”your-email” placeholder=”e-mail”>
</div>

<div class=”contact-item”>
<label class=”label” for=”re-email”>メールアドレス(確認用)<span class=”red”>*</span></label>
<input class=”inputs” type=”email” id=”re-email” name=”your-email” placeholder=”e-mail”>
</div>

<div class=”contact-item”>
<label class=”label” for=”title”>お問合せタイトル</label>
<input class=”inputs” type=”title” id=”title” name=”your-title” placeholder=”title”>
</div>

<div class=”contact-item”>
<label class=”label” for=”message”>お問合せ内容<span class=”red”>*</span></label>
<textarea class=”inputs” name=”message” id=”message” cols=”30″ rows=”10″ placeholder=”messages”></textarea>
</div>

<div class=”btn-area”>
<input class=”btn-text link-hover” type=”submit” value=”Send”>
</div>
</form>

WordPress お問い合わせ

<div class=”form” action=””>
<div class=”contact-item”>
<label class=”label” for=”name”>お名前<span class=”red”>*</span></label>[text* your-name class:inputs placeholder “name”]
</div>

<div class=”contact-item”>
<label class=”label” for=”email”>メールアドレス<span class=”red”>*</span></label>[email* your-email class:inputs placeholder “e-mail”]
</div>

<div class=”contact-item”>
<label class=”label” for=”re-email”>メールアドレス(確認用)<span class=”red”>*</span></label>[email* your-email class:inputs placeholder “e-mail”]
</div>

<div class=”contact-item”>
<label class=”label” for=”title”>お問合せタイトル</label>[text title02 class:inputs placeholder “title”]
</div>

<div class=”contact-item”>
<label class=”label” for=”message”>お問合せ内容<span class=”red”>*</span></label>[textarea* text 20×5 class:inputs placeholder “message”]
</div>

<div class=”btn-area”>
[submit class:btn-text “Send”]
</div>
</div>

<div class=”add”>
<p class=”decoration dec6″>Thank you</p>
</div>

●inputタグを決して、フォームのカスタマイズからピンク部分を作成

●Formタグをdivへ変更

つくりかた

今回は簡単なフォームだけだったので、下記リンクより詳しい方法を確認しよ。

https://bazubu.com/contact-form-7-23869.html

フォームを作成後、自動返信メールもつくれる!

リンクの更新

各ページ公開後、それぞれのリンクを確認

各ページのリンクができたら、それぞれの固定ページにあるaタグで表示したいページのリンクを、作成したページのリンクに置き換える。

PHPファイル内

headerメニューのリンクを修正・更新する

・・・・ href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>URLスラッグ“>ページ名</a>

<?php echo esc_url( home_url( ‘/’ ) ); ?>

こちらのコードについてhttps://delaymania.com/201606/wordpress/wordpress-home-url/

URLスラッグ

固定ページを公開する際に、決められるページURL名

コードを追記、URLスラッグ名を変更し、保存すればOK

WordPress化

今回は教わりながらやりました。

クライアントさんが更新しやすいようにするにはまだまだ調整が必要そうです。

それについては、今後追加できるよに引き続き要勉強!

Single.phpを追加していないので、その時も勉強が必要かな・・・と。

HTML/CSSをつくった後にどうのようにWordpress化していけばいいのか、とても疑問に思っていたので、

ひとつ目標をクリアできたことは大きな進歩♡

今回、教えていただいて、買っていただけで眠っていたWordpressの本が、読めるようになりました 笑

慣れない・わからない・経験なしの分野については、その道のプロに聞くのがいちばん早い道のりだな〜と再認識。

どうか1年後のわたし。

Woerdpressとお友達に慣れてますように・・・♡