xengineer’s diary

結果、メモ的な内容になっています。

手っ取り早くWordPressのテーマの見た目だけいじりたい人に役に立つかもしれない情報

wordpress

WordPressの勉強をする機会があったので、忘れないようにメモ。

ちなみに、まだ勉強しただけでいじってませんのでほんとにこの記事の結果で大丈夫か不明です。

やることは、以下。

  • Webサイト構築
  • デザインはデザイナーさんがやってくれる
  • フロントのコーディングはコーダーさんがやってくれる
  • 僕の担当
    • WordPressを準備して、それっぽいテーマを適用して、編集しないといけないファイルを割り出して伝える
    • 他にシステム的にわからないことに対応する

WordPressのサイトはここです。

http://wordpress.org

今回は、エックスサーバっていうレンタルサーバを借りてる方からの依頼だったので、それもはじめて。

レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

WordPressのインストールからなのか・・・つらい・・・と思ったら、エックスサーバは自動インストールっていう便利機能があったので活用しました。

shellもいただけるので、インストール後の状況もわかるし、グッド。

  • それっぽいテーマの選定
  • テーマのインストール
  • どこをいじるのか探す

それっぽいテーマの選定

デザイナーさんから頂いた最初の案に近しいテーマを選定します。

  • レスポンシブ
  • 一番上に、画面横サイズ一杯にでかい画像
  • その下に、3個くらいの小さい画像

の案で探すぞー。おー。

まずは、ダッシュボードから、「外観」→「テーマ」を選択。

f:id:xengineer:20160522173915p:plain

テーマ一覧が出たら、上のほうにある、「新規追加」をぽち。

f:id:xengineer:20160522174102p:plain

新規に追加できるテーマのリストが出るけど、検索したいので、「特徴フィルタ」をぽち。

f:id:xengineer:20160522174337p:plain

次の画面で、フィルタできる条件が出てくるので、それぽいのを選んでフィルタかけます。

f:id:xengineer:20160522174822p:plain

で、そのなかから探す探す。

テーマのインストール

ちなみにぼくは、enigmaっていうテーマに落ち着きました。

ja.wordpress.org

インストールは簡単。

下記のボタンを押すだけ(画像はenigmaのではありませんが)

f:id:xengineer:20160522175042p:plain

これでインストール完了。

どこをいじるのか探す

で、どこをどういじったら見た目がかわるのか。

まずは、ダッシュボードから、「テーマの編集」を選択してみます。

f:id:xengineer:20160522184855p:plain

そうすると、右のパネルにいかにも編集できるファイル一覧、的なリストがあります。

f:id:xengineer:20160522184918p:plain

でも、どのファイルが一番最初に描画される、とか、全然わからない。

色々調べてみたところ、下記の記事でよーくわかりました。

WordPressで困惑しがちなindex.phpとhome.phpとfront-page.phpの違い - Kowappa

つまり、優先順位は。

index.php ＜ home.php ＜ front-page.php

enigmaには、index.phpとfront-page.phpがあるので、front-page.phpが最初に描画される。

内容はこんな感じ。

<?php get_header(); 
$wl_theme_options = weblizar_get_options();
$wl_theme_options['_frontpage'];
if ($wl_theme_options['_frontpage']=="1" && is_front_page())
{   get_template_part('home','slideshow'); 
    if($wl_theme_options['service_home'] == "1") {
    get_template_part('home','services'); 
    }
    
    if($wl_theme_options['portfolio_home'] == "1") {
    get_template_part('home','portfolio'); 
    }
    if($wl_theme_options['show_blog'] == "1") {
    get_template_part('home','blog');
    }
    if($wl_theme_options['fc_home'] == "1") {
    get_template_part('footer','callout');
    }
    get_footer();
}
 else 
{   
    if(is_page()){
    get_template_part('page');
    }else{
        get_template_part('index');
    }
}   ?>

つまーり、こんな順番で呼ばれるぽい。

  • home-slideshow
  • home-services
  • home-portfolio
  • home-blog
  • footer-callout

画面を探してみるとー・・・

f:id:xengineer:20160522185501p:plain

あったあった。

この辺と、style.cssをいじってやればいい感じにいける予感。

というわけでした。うまくできたら追記しよ。