WordPressでサイトをつくる～備忘録P.2～ | NOR NO HACO / デザインのハコ

P.2ではオリジナルテーマの設定から書いていきます。

WordPressnには、デフォルトのテーマ、デザインテーマ、オリジナルテーマがあります。

スポンサードリンク

テーマの種類

WordPressにログインし「外観」→「テーマ」へ

デフォルトテーマ

初めから用意されているテーマのことです。

※NORwpというテーマはこのサイトの「オリジナルテーマ」です。

デザインテーマ

テーマに「新しいテーマの追加」と＋マークがありますが、こちらからテーマを選んで追加できるようになっています。

色んな人がデザインしたテーマが並んでいて、とても参考になりますね。※有料のものもあります

オリジナルテーマ

こちらについては、自分でHTML、CSSを使って構築していかなければいけません。

必要なデータは

index.html

　　HTMLファイル　サイトに表示する要素・テキストなどが記述されていると思います。

style.css

　　CSSファイル　HTMLに記述した各要素やテキストに対し、幅や高さ、色や効果の指定が記述されていると思います。

imgフォルダ

　　サイトに使用している画像データが入っていると思います。※無くてもOKでした

こちらを1つのフォルダにまとめて入れておいてください。フォルダ名はわかりやすい名前で大丈夫です。

PHPファイルに変換

WordPressはPHPファイルで構成されます。

「index.html」は「index.php」へと拡張子を変更しましょう。

「style.css」へは冒頭に以下の記述をします。

/*
Theme Name: テーマの名前
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

※テーマの名前は必須です。

ここでFTPを操作するソフトが必要になります。

「ロリポップ」などのサーバーにも備え付けられている場合がありますが、私は「FFFTP」が使いやすくて愛用しています。

詳しくはコチラの記事をご覧ください。

FTPクライアントソフト「FFFTP」

ダウンロードサイトへ

接続したら「wp-content」フォルダ内の「themes」フォルダの中に、先ほどまとめたテーマフォルダを入れます。

アップロードできたら、WordPressの管理画面から、外観→テーマと進んでいきます。

すると、先ほどアップロードしたテーマが出てきます。

テーマを有効化させます。※テーマのプレビュー画像はありません。

プレビュー画像を表示させたい場合は、サイトをスクリーンショットして、その画像名を「screenshot.png」として保存し、先ほどのテーマフォルダ内へアップロードします。※imgフォルダ内ではありません

管理画面最上部の左端（サイト名）にマウスオーバーすると「サイトを表示」が出てきますので、テーマが適用されているか見てみます。

が、CSSが適用されていません。

WordPressでは相対パスは基本的に使えないので、絶対パスで指定しないといけないみたいです。

「相対パス」と「絶対パス」についてはコチラの記事をご覧ください。

HTMLとCSSの基礎知識 P.2

index.phpの<head>内に書いている

<link rel="stylesheet" href="./style.css" type="text/css" />

の部分を

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" >

に書き換えます。

ファビコン（WEBアドレスバーに表示されるシンボルアイコン）を設定している場合は

<link rel="shortcut icon" href="images/favicon.ico">

の部分も

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">

に書き換えます。

index.phpを分割する

phpファイルは「header.php」「sidebar.php」「index.php」「footer.php」のように大分類で分割しておけば、必要な時に呼び出すことができます。

先ほどアップロードした「index.php」をローカルにダウンロードし、コピーを作成して作業します。※何かあっても大丈夫なように・・・

header.phpをつくる

<!DOCKTYPE html>
<head><title>タイトル</title></head>

　<!-- 省略 -->

<body>

　<!-- 省略 -->

<div id="header"><h1>テキストテキスト</h1></div>

<!DOCKTYPE html>から<header>部分までを残し、「header.php」として「名前を付けて保存」。※index.phpにそのまま上書きしないように注意

sidebar.phpをつくる

<div id="sidebar">

　<p>テキストテキスト</p>

　<!-- 省略 -->


</div>

<sidbar>が包含している部分だけ残し、「sidebar.php」として「名前を付けて保存」。

footer.phpをつくる

<div id="footer">

　<ul>
　　<li>テキスト1</li>
　　<li>テキスト2</li>
　　<li>テキスト3</li>
　　</ul>

　　<!-- 省略 -->

</div>
</body>
</html>

<footer>から最終行までを残し、「footer.php」として「名前を付けて保存」。

index.phpへ各ファイルの呼び出し

「index.php」には上記3つ以外のメインの部分が残ります。

<div id="main">


 <div class="content">


　<!-- 省略 -->


 </div>

</div>

↑こんな感じで。

その中に「header.php」、「sidebar.php」、「footer.php」を呼び出す記述を入れます。

<?php get_header(); ?> <!-- header.phpを呼び出す -->


　<div id="main">


　　 <div class="content">


　　　　<!-- 省略 -->


 　　</div>


　　<?php get_sidebar(); ?>　<!-- sidebar.phpを呼び出す -->


　</div>


　<?php get_footer(); ?>　<!-- footer.phpを呼び出す -->

<?php get_header (); ?> ←これらはインクルードタグといいます。

これにより、ページ毎にヘッダーやフッター、サイドバーを変えたりできるとのこと。

便利ですね。

それぞれのphpファイルをFTPソフトを使って、テーマフォルダ内にアップロードします。

index.phpは上書きして大丈夫です。

ここからはサイトのデザインによって作業が分かれてくると思います。

備忘録P.3では、便利なプラグインについて書いていこうと思います。

私が実際に参考にさせて頂いたのは”WEBデザインレシピ”さんの記事でした。

この記事の何倍もわかりやすくまとめられていますし、他の記事もぜひチェックです。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）

ファンになってしまい、出版本も買いました(笑)

↓これです。まわしものじゃありません(笑)　ぜひ読んでみてください。

基礎からのWordPress　改訂版 (BASIC LESSON For Web Engineers)

最後までお読みいただき、ありがとうございます。

投稿日: 2015-09-25
カテゴリー: CSS | 投稿者: NOR

全コンテンツ新着記事

【コピペで簡単】HTML+CSSで作るボタンデザイン集
「お問い合わせ」「購入」「予約する」など、重要な役割を果たすボタンデザインはこだわってデザインする必要があると思います。

今回は、HTMLとCSSを使って簡単にボタンデザインが可能なソースコードを都度更新していきます。

続きを読む

【Photoshop】物体や人物を切り抜きして背景を透明にする方法（画像・動画付き）
Photoshopでよくある作業の一つ「切り抜き」は、いくつかの方法で実現が可能です。

「切り抜き」をした素材はpsdやpngなどで保存すれば透過データとして扱うことができ、様々な場面で活躍します。

今回はそのいくつかの方法を画像や動画付きで書き残しておきます。

続きを読む

【動画編集ソフト Premier Proの使い方】01. 動画の新規作成方法とタイムラインについて
昨今では「動画編集スキル」が求められ、非常に需要が高まっています。

今回は、これから動画編集を始めようとする方向けに、なるべくわかりやすくお伝えできればと思っています。

続きを読む

【AI新機能の使い方】Illustratorの生成AI「Firefly Image 2」でテキストからベクターを作成！
Adobe Illustratorに追加された「生成AI（Adobe Firefly）」の新機能「Firefly Image 2」を実際に使用してみました。

以前にPhotoshopの生成AIも使用してみましたが、Illustratorはベクター生成なのでより直感的な作業・デザイン制作が可能になるかと思います。

続きを読む

【最新AI機能の使い方】PhotoshopのAI画像生成機能がすごい！
Adobe Photoshopに追加された新機能「生成AI機能」を実際に使用してみました。

今まで合成の作業はモノによっては、とてつもない時間と労力を費やしていましたが、この新機能でかなりの短縮になると思います！

続きを読む

iPhone Xに機種変更して気付いたiTunesの落とし穴
2017年11月3日発売だったiPhoneX（アイフォーン10）。

予約開始が同年10月27日16:01からだったので、私は15:59から携帯を握りしめ、16:00:45から予約ページの更新を繰り返しながら、ページが表示されるとすぐ予約の申込みを完了しました。

その成果あってか、発売日の11月3日の午前中には受け取りにいくことができました。

続きを読む