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

全コンテンツ新着記事

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

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

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

続きを読む

iPhone6sをそこそこの値段で買い取ってもらいました
私は機種変更をする時に、下取りには出しません。

だいたい1万前後でしか下取りしてくれないから。

今回、iPhoneXに機種変更した際にiPhone6sをネットで売った手順をご紹介しておきます。

続きを読む

Facebookの記事シェア時に画像が表示されなかった時の対処
あまり気にもとめてなかったSNSのシェア後の表示について。

今回、広めたい記事を自分のFacebookでシェアしようと思ったところ、画像が表示されていませんでした。

その時の対処を備忘録として。

続きを読む

mac for excel クラッシュ時の一時保存フォルダの場所
macのexcelで作業をしている時、何かのエラーを叩いてしまった際、excelが急にクラッシュして強制終了なんてことがよくあります。

そんな時、Office製品はしっかり一時保存データを残してくれています。

macでの一時保存フォルダを備忘録で残しておきます。

続きを読む

【Photoshop】簡単にドット柄を作る
最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にドット柄の作り方を備忘録で残しておきます。

私の環境はPhotoshop CS6 for Macです。

続きを読む

【Photoshop】簡単にストライプ（ボーダー）柄を作る
最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にストライプ柄、ボーダー柄の作り方を備忘録で残しておきます。

私の環境はPhotoshop CS6 for Macです。

続きを読む