フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

Bootstrap4で作る最強WordPressオリジナルテーマ開発 その2 Bootstrapを使うための準備

今回はBootstrapを使うための準備です。
WordPressのテーマとして開発するので、当然ですがWordPressがインストールされた環境が必須です。

まずは空のテーマを用意します。最低限、必要なファイルは3つです。

・style.css
・functions.php
・index.php

このファイルを置くためのフォルダは自分で作る必要があります。
作る場所は「/wp-content/themes」の中です。
注意点として、作るフォルダの名前はテーマの名前にすることです。

例えば「new」というテーマ名であればフォルダ名は「new」とします。
フォルダを作るにはFTPソフトかレンタルサーバーにあるウェブ版のFTPで作ります。

作ったフォルダの中に、とりあえず中身は空でいいので上記3つのファイルを作ります。
ファイルのエンコードは全て「utf-8」形式で保存して下さい。

ここまでは大丈夫ですか?

次にワードプレスの作ったテンプレートを新しいテンプレートと認識させる作業です。
このままではワードプレスはテンプレートを認識しません。
認識させるもとになるファイルは「style.css」です。
このファイルのヘッダー部分にメタ情報を書き込むことでワードプレスはテンプレートを認識します。
書き込むヘッダー情報は以下のようなものです。

/*
Theme Name: hoge
Description: シンプルなレスポンシブテンプレート
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: 0.x
License: ライセンス
License URI: ライセンスの URL
*/

これを自分のお好みで書き換えコピペして、ファイルを保存したらアップロードし直します。
「Theme Name」については先程作ったフォルダ名を指定します。日本語は非推奨です。
テーマを商用で販売する際、実は厄介なのがライセンスです。話がややこしいので参考サイトを御覧ください。
ライセンスについては以下のサイトが参考になります。

▼GPLやMITやCCなど主要ライセンスの内容と意味のまとめ

GPLやMITやCCなど主要ライセンスの内容と意味のまとめ

▼WordPressとGPLライセンスについて

WordPressとGPLライセンスについて

ここまででワードプレス側は新しいテンプレートを認識します。
管理画面のダッシュボードの [ 外観 ] → [ テーマ ] をクリックすると新しく追加したテーマが表示されているはずです。

ここまでは大丈夫ですか?

しかし、このままでは認識しただけですのでテーマを適用しても真っ白になります。中身がないからです。
どうすればいいかというと「index.php」にHTMLタグとPHPスクリプトを追加する必要があります。
まずは基本的なテンプレートを見ながら徐々に追加していきます。

最も基本的なテンプレートは「HTML5」形式で記述するということです。
以下のようになります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
	本文を書く
</body>
</html>

これが基本的なテンプレートで、ここにレイアウト情報やワードプレスの関数をPHPで記述していきます。
レイアウトはBootstrapで行うので、早速ですがBootstrapを使うための準備もします。
今回、BootstrapはCDNで読み込みます。CDNはコンテンツを借りられる仕組みで、ファイルサイズが大きいスクリプトなどは別ネットワークから借りてきたほうが表示が早くなるというメリットがあります。
以下のようになります。

会員限定コンテンツ

この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。

ログインはこちら

新規会員登録はこちら

パスワードをメールで送信します。

コメント

  1. 2018/04/09(月) 12:52:05
    【Bigmac inc.ブログ】 「WordPressテーマの元となるテンプレートファイルを知ろう」 #Web制作 #LP制作 #コーディング #リスティング広告 #構築 https://t.co/0fB2qrDv22
  2. 2018/04/09(月) 12:52:05
    @godog831 Tumblr がシンプルで無料ですし、テーマ(テンプレート)が沢山あって良いかもですよ。無料テンプレート、こんな感じです↓↓↓ https://t.co/nbnF7n2wMd
  3. 2018/04/09(月) 12:52:05
    #擬人化世界観シート テンプレート使わせていただきました!特急メインの列車擬です! 「時代で輝いた列車達の、儚く切ない軌跡」を主にテーマにしてます!
  4. 2018/04/09(月) 12:52:05
    テレビ塔で行われた塩谷舞さんのWebライターをテーマにしたイベントに参加。 人の考えるメディア戦略の部分を聞けることは貴重でした。 なぜこうしているのかを聞いて量産型のテンプレートライターにならないように自分の今持っている考えと照らし合わせ精度を上げよう。 #ライターぶっちゃけ会議
  5. 2018/04/11(水) 00:46:15
    “TemplateMonsterで割引中のハイクオリティなWordpressテーマ・テンプレート(20個) - いぬらぼ” https://t.co/vnG4gBVuuK #wordpress #webデザイン #ui #素材 #テーマ

記事に戻る

コメントを残す