【第2回】元となるHTMLソースを用意して:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

【第2回】元となるHTMLソースを用意して:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

元となるHTMLソース(オリジナルデザインのテーマをhtmlコーディングをしたもの)があり、それをWordPress用(php)にしていく方法が楽に進められるかと思いますので、なるべく、htmlコーディングまでやっておくことをお勧めします!

(当方、これを書いている現時点でコーディングした現物が無いため、作りながら進めます、、、)

HTMLソースを用意する(できれば)

第1回では空のindex.phpを用意しましたが、そのindex.phpに手を加えていきます。

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/websaite#">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="サイトのURL/assets/css/common.min.css">
<!--keyword description og -->
<meta name="keywords" content="サイトのキーワード">
<meta name="description" content="サイトの説明">
<meta property="og:type" content="website">
<meta property="og:title" content="このページのタイトル | サイト名">
<meta property="og:url" content="サイトのURL">
<meta property="og:image" content="サイトのイメージ画像URL">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!--facebook-->
<meta property="article:publisher" content="https://ja-jp.facebook.com/***************/">
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx">
<!--twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@xxxxx">
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="サイトのURL/apple-touch-icon.png">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="サイトのURL/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="サイトのURL/favicon.ico">
<title>このページのタイトル | サイト名</title>
</head>

<body ontouchstart="">
<header id="header">
  <nav class="navbar navbar-light">
    <a class="navbar-brand" href="#">サイト名やロゴ画像</a>
  </nav>
</header>

<main id="main" role="main">
  <section class="container-lg">
    コンテンツ内容
  </section>
</main>

<footer id="footer">
  <p class="text-center">&copy; Your Site name</p>
</footer>

<!--script-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>
</html>

上記のhtmlソースには、bootstrapのクラス名が入っています。

具体的には、
《navbar / navbar-light / navbar-brand》《container-lg》《text-center》
これらのclassはbootstrapのもので、
head内で、bootstrap.min.cssを読み込んでいます。

bootstrapはとても便利で優秀なフロントエンドWebアプリケーションフレームワークです。便利なものを使わない手はない!ということで、使っていきます!

●bootstrap公式サイトはこちら
https://getbootstrap.com/
●bootstrap日本語サイトはこちら
https://getbootstrap.jp/

また、上記htmlソースは、header、main、footerなど簡単にしか書いていないため、このままでは全くデザイン性の無いものになってしまいますが(冷や汗)、
ひとまずはこのままで作っていきます(中身はあとで考える!)。

head内には、meta情報などを記述しますがこれらの説明は割愛いたします。


htmlソースを、index.phpにコピー&ペースト。

ワードプレスの管理画面
画面左側
外観テーマエディター》を選択、
画面右側の《メインインデックスのテンプレート》index.phpを選択

ワードプレスの管理ページ上でindex.phpを編集します。

このindex.phpが、第1回でまっさらな状態でUPしたindex.phpです。

独自のhtmlソースを用意している方は、
トップページのhtmlをそのままindex.phpにコピー&ペースト、
まだ何にも用意してないよーという方は、上記のhtmlソースをindex.phpにコピー&ペーストして保存してください。

こんな感じで、しっかり保存できましたでしょうか!?

現時点では、htmlがphpになっただけ状態ですので、
次回は《head》にワードプレスのテンプレートタグを挿入していきます!
これからが本番ですね!

※ワードプレスの管理画面にて、サイトのタイトル、キャッチフレーズ、URL等の設定を済ませておきましょう~。

【第3回】headにテンプレートタグを入れる:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】


この記事が気に入った・役に立つと思ったらチップを送りませんか?
ライターの支援と励みになります!

この記事のライター

web系IT業界で働く人。Webデザイナー×マークアップエンジニア。

このライターが書いた他の記事

  • 【第5回】(記事表示①)テンプレートタグを入れる:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

  • 【第3回】headにテンプレートタグを入れる:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

  • 【第1回】まずは下準備:WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

関連のおすすめ記事

  • ユニクロペイがスタート 使うメリットはあるの?

    yoimono

    yoimono