WordPressでサイトをつくる~備忘録P.2~

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

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


スポンサードリンク


 

テーマの種類

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

デフォルトテーマ

WP-1

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

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

 

 

デザインテーマ

WP-2

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

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

 

 

オリジナルテーマ

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

必要なデータは

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

 

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

 

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

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

 

 

PHPファイルに変換

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

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

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

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

 

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

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

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

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

 

ダウンロードサイトへ

 

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

 

themeフォルダ階層

 

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

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

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

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

 

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

 

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

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

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

HTMLとCSSの基礎知識 P.2

 

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

の部分を

に書き換えます。

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

の部分も

に書き換えます。

 

 

 index.phpを分割する

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

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

 

header.phpをつくる

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

 

sidebar.phpをつくる

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

 

footer.phpをつくる

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

 

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

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

↑こんな感じで。

 

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

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

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

便利ですね。

 

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

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

 

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

 

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

 

 

 

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

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

 

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

 

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

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

 




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

全コンテンツ新着記事

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

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

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

     

    続きを読む

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

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

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

    続きを読む

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

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

    続きを読む