CODE

【リモートワークしたい人向け】WordPress案件の解説とテーマカスタマイズ方法

こんにちは、まさです。
現在フリーランスとしてフルリモートで働いています。
WordPress案件も仕事の一つとしています。

この記事を読むことで

  • WordPress案件ってどんなものがあるの?
  • WordPressのテーマカスタマイズってどうやるの?

という疑問が解消できます。

WordPress案件ってどんなものがあるの?何するの?

WordPress案件=Webサイトを作る案件だと思ってもらってOKです。
世の中のWebサイトの多くはWordPressを使って作られています。
WordPressはWebサイトを作るためのシステムのことです。

ではそんなWordPress案件はどんな種類があるのでしょうか?
大きく3つに別れます。

①既存のWordPressテーマをカスタマイズする案件(コーディングなし)

②既存のWordPressテーマをカスタマイズする案件(コーディングあり)

③WordPressテーマを一から自作する案件

です。この中で②までができるようになれば、案件獲得へGoしてOKなレベルです。
なぜなら、世の中の案件は②が最も多いからです。

ちなみに、

メモ

テーマとは・・・
WordPressで作るWebサイトのデザインの雛形のこと

既存のテーマとは・・・
既に作られて公開されているテーマのこと

テーマのカスタマイズ(コーディングなし)とは・・・
既存のテーマをWordPressの管理画面を使ってカスタマイズすること

テーマのカスタマイズ(コーディングあり)とは・・・
既存のテーマのphpファイル(htmlファイルとほぼ同等の意味)やcssファイルをカスタマイズすること

テーマの自作とは・・・
テーマを一から作ること。つまり、Webサイトのデザインからコーディングから全て行うこと

というイメージでOKです。厳密には違うかもですが、ざっくりこんな感じです

①は難易度が低い分、カスタマイズできることが少ない

③はカスタマイズできることが多い、ですが難易度が高い

②は①と③の中間

って感じなので②ができれば多くの案件がこなせるようになる。というロジックです

ということで、以下からは②の方法について詳しく説明していきます

WordPressのテーマカスタマイズ(コーディングあり)方法

テーマのカスタマイズは以下の流れで行います。

①作りたいWebサイトをHTML,CSSで作成

②テーマをダウンロード

③子テーマのphpファイル、cssファイルを修正する

順番に解説していきます。

①作りたいWebサイトをHTML,CSSで作成

まず、作成したいWebサイトをHTML,CSSで作っておきます。
WordPressのテーマを作ると言っても結局ベースはHTMLとCSSです。
レスポンシブにもしっかりと対応させて作りましょう。後々楽になります。

この後の手順で①で作ったHTMLファイルCSSファイルという記述がたくさん出てきますが、
こちらのファイルのことです。

②テーマをダウンロード

テーマのカスタマイズなので、当然既存のテンプレートを取得する必要があります。
既存のテンプレートはWordPressの管理画面>外観>テーマ>新規追加で検索することも可能ですし、
ググって検索してダウンロード後、WordPressの管理画面>外観>テーマ>新規追加>テーマのアップロードでWordPressに取り込むこともできます。

今回はStringer8というテーマをカスタマイズしていきます。
選定ポイントは3つ

①SEOに強いから

②無料だから

③カスタマイズを前提としたシンプルなテーマだから

です。

下記サイトがダウンロードページです

STINGER8 - STINGER史上最高にシンプルなテーマ

ページに行っていただき下のほうに行くと下記写真のような箇所があるはずです。
この吹き出し部分がダウンロードリンクです。

  • STINGER8ver20171207
  • STINGER8子テーマ20170614

の二つをダウンロードしてください。
※verの数字は異なる可能性があります。

ここで、

はてな

なんでテーマが二つあるの?子テーマってなにもの!?


となるかもしれません。

WordPressのテーマは親テーマと子テーマという二つが存在します。
ここが少しややこしいのですが、説明します。

親テーマ・・・
テーマのベースとなるものです。

子テーマ・・・
親テーマをベースにカスタマイズされたテーマのことです。

はてな

カスタマイズされたテーマ??これからテーマをカスタマイズしていこうとしてるんじゃないの??


と思った方へ。

テーマのカスタマイズというものは一般的に、
親テーマから子テーマを作って、その子テーマをカスタマイズしていくことを指します。

これからSTINGER8既に用意されている子テーマを使って
その中身を独自のデザインにカスタマイズしていきます。

親テーマしか用意されていない場合は自分で子テーマを作る必要がありますが、
STINGER8は用意されているので、この子テーマをカスタマイズしていくということですね。

はてな

じゃあ親テーマを直接カスタマイズしちゃだめなの?


という疑問が湧いてくるかもしれませんが、この理由は、
親テーマは定期的にアップデートされていて、
そのアップデートが適用された時に自分でカスタマイズした内容が全て消えてしまう…
ことになってしまうんです。

こうなると汗と震えが止まらなくなります。笑
なので安全のために必ず子テーマをカスタマイズしましょう。

説明が長くなりましたが、親テーマと子テーマ、テーマのカスタマイズについてご説明しました。

次からは、実際にダウンロードした親テーマと子テーマを展開して確認してみましょう。

親テーマを展開

ファイルがたくさんあって面くらいますが、重要なファイルの意味だけおさえておけばOKです。

style.cssはWebサイトの見た目をデザインするファイルのことですね。

phpファイルhtmlファイルの役割を示しています。
中身はhtmlファイルと似た構成になっていますが、WordPressでWebサイトを作る場合、
ところどころPHPの関数を使う必要があるので、phpファイルになっているわけですね。

とりあえず以下を覚えればOKです。

  • home.php :サイトのトップページ
  • header.php:サイトのヘッダーエリア
  • single.php:投稿記事ページ
  • page.php:固定ページ
  • 404.php:404ページ
  • index.php:上記のファイルがない時に表示されるページ(例:トップ画面を表示した時にhome.phpがない場合はindex.phpが表示される。index.phpがない場合は404.phpが表示される)

シンプルなページであればこれだけ修正すれば独自デザインに変更可能になります。

続いてダウンロードした子テーマを展開してみましょう。

子テーマを展開

おや、親テーマと違ってかなりファイル数が少ないですね。

これについて説明していきます。

まず前提として、テーマは、WordPressの管理画面>外観>テーマ画面で「有効化」されたテーマが適用されますが、
子テーマのみ適用しても有効化できません。
親テーマと子テーマをセットでアップロードしておき、子テーマを有効化する。
という手順で初めて親テーマをベースとした子テーマが適用されます。

これを前提に話すと、
子テーマを有効化した後、例えばトップページを開いた場合、
WordPressは下図のようにファイルを探して表示してくれます。

話を戻すと、

はてな

なぜ子テーマのフォルダの中身はhome.phpやpage.phpなどが無いのか?

それは、子テーマを何もカスタマイズしていなければ、親テーマが適用される仕組みになっているから、ということですね。

③子テーマのphpファイル、cssファイルを修正する

いよいよ子テーマをカスタマイズしていきます。

ここからは、WordPressのテーマが保存されているフォルダを開く必要があります。
テーマが保存されているフォルダは以下の場所にあります。

WordPressのインストールフォルダ>wp-content>themes

サーバーや仮想環境などにインストールしている場合はFTPソフトなどが必要な場合があります。
良く分からない人はドットインストールのWordPress講座で学習してみてください。

 

cssファイルのカスタマイズ

stinger8-childフォルダ直下にある、style.cssを①で作ったCSSファイルで中身を上書きします。
既存のstyle.cssのメディアクエリのサイズは下記の通りになっているので、自分で作ったものと異なっている場合は、写真のサイズに合わせた方が無難ですが、ここはお任せします。

 phpファイルのカスタマイズ

カスタマイズしたいページのphpファイルを子テーマフォルダの中に作っていきます。

今回は

  • トップページ
  • サイトのヘッダーエリア
  • 固定ページ
  • 投稿記事ページ

をカスタマイズしていきます。

なので、親テーマから

  • home.php
  • header.php
  • page.php
  • single.php

をコピーして子テーマのフォルダにペーストしましょう

以下からは、各ファイルごとに①で作成したHTML,CSSの中身をphpファイルへ移行していきます。

header.phpの修正

まずheader.phpから修正していきましょう。

まず、<head></head>で囲まれている部分を見つけてください。
ここに、①で作成したHTMLファイルで書いた<head></head>の内容を書き加えていきます。

例えば、HTMLファイルで

<!—Bootstrap Css—>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css” />

といった感じで、bootstrapのcssを読み込んでいる場合は、phpファイルでは、

<!—Bootstrap Css—>
<link rel=“stylesheet” type=“text/css”
href=“<?php echo get_stylesheet_directory_uri(); ?>/css/bootstrap.min.css” />

という書き方をしていきましょう。

ここで、<?php echo get_stylesheet_directory_uri(); ?>という特殊な書き方をしています。
これはWordPress特有の記述方法で、こう書かないときちんとファイルのパスを読み込んでくれずエラーとなります。

これは画像ファイルなどを読み込んでいる場合も同様なので注意してください。

次にヘッダーを修正していきましょう。
デフォルトでは

といった見た目になっています。これが<header></header>のタグで囲まれた箇所で書かれています。
WordPressの管理画面>テーマ>カスタマイズからでも画像の修正・変更は可能です。さらに見た目を変えたい場合は、
①の手順HTMLで書いた<header></header>の内容にまるごと書きかえれば完了です。

 

home.phpの修正

トップページの修正です。
ファイルを開くと、中身は

<?php get_header(); ?>

<div id=“content” class=“clearfix”>
  <div id=“contentInner”>
    <div class=“st-main”>
      <article>
        <div class=“st-aside”>
          <?php get_template_part( ‘itiran’ ); ?>
          <?php get_template_part( ‘st-pagenavi’ ); //ページナビ読み込み ?>
        </div>

          <?php get_template_part( ‘sns-top’ ); //ソーシャルボタン読み込み ?>

      </article>
    </div>
  </div>
  <!— /#contentInner —>
  <?php get_sidebar(); ?>
</div>
<!— /#content —>
<?php get_footer(); ?>

これだけです。
関数が書かれていて難しそうに見えますが、意味は以下の通りです。

  • <?php get_header(); ?>→header.phpファイルを読み込みます
  • <?php get_sidebar(); ?>→sidebar.phpファイルを読み込みます。
  • <?php get_footer(); ?>→footer.phpファイルを読み込みます。
  • <?php get_template_part(‘〇〇’) ?>→〇〇ファイルを読み込みます。

これがトップページに書かれているので、トップページでは、ヘッダーやサイドバー、フッターが表示されているんですね。

<div id=“content”・・・
からがトップページの中身なので、HTMLファイルから適切に移植してください。

page.phpの修正

固定ページを修正していきます。
ざっくり流れを書きます。

①コピーしてきたpage.phpの名前を作成したい固定ページ用に変更
例:page.php→page-profile.phpに変更する

②page-profile.phpを開き、1行目から5行目に以下を記述

<?php
/*
Template Name: page-profile
*/
?>

Template Name:は変更したファイル名と同じでOKです。

③6行目以降は①で作ったHTMLファイルに書き換えていってください。
既存のファイルには色々書かれており、分かりにくいですが調べながら適切に削除したり修正して行ってみてください。
ここは少し知識が必要になります。

④WordPressの管理画面>固定ページ>新規追加をクリックする

⑤画面右上の歯車マークを押下

⑥ページ属性>テンプレートでpage-profileが追加されていることを確認し、選択する。

固定ページのタイトルを入力して、プレビューしてみてください。
page-profile.phpに書いたオリジナルの固定ページが反映されているはずです。

single.phpの修正

page.phpの修正とほぼ同様です。

①コピーしてきたsingle.phpの名前を作成したい投稿ページ用に変更
例:single.php→page-blog.phpに変更する

②single-blog.phpを開き1行目から以下を記述

<?php
/*
Template Name: single-blog
Template Post Type: post,blog
*/
?>

③本文は同様にHTMLファイルの中身に書きかえてください

④WordPressの管理画面>投稿ページ>新規追加

⑤画面右上の歯車マークを押下

⑥投稿の属性に作成したテンプレートが追加されているのでそれを選択しましょう

③について、僕が作成したテンプレートの一部を載せます。

<section class=“section” id=“profile”>
 <?php if (have_posts()) : while (have_posts()) :
                      the_post(); ?>
  <div class=“detail_blog_title”>
   <h3 class=“pb-3”><?php the_title(); //タイトル?> </h3>
   <div class=“detail_blog_content”>
   <?php the_content(); //本文?>
  </div>
 <?php endwhile; else: ?>
  <p>記事がありません</p>
 <?php endif; ?>
</section>

ここで、またPHPの関数が必要になります。

  • <?php the_title(); //タイトル?>
  • <?php the_content(); //本文?>

の部分ですね。

これはWordPressの投稿ページで書くタイトルと本文に対応します。

なので、この関数を書かないと、せっかく投稿ページを書いてもページに全く表示されない。
となってしまうので注意です。

また、これらの関数の前後に以下のphpのコードを書く必要があるので、注意してください。

<?php if (have_posts()) : while (have_posts()) :
                    the_post(); ?>
 ・・・
 ・・・
<?php endwhile; else: ?>
 <p>記事がありません</p>
<?php endif; ?>

以上でカスタマイズの説明は終了です。

まとめ

今回は

  • WordPress案件ってどんなものがあるの?
  • WordPressのテーマカスタマイズってどうやるの?

について説明してきました。

カスタマイズはもちろん全て網羅できたわけではないですが、
なんとなく、「こんな風にやるんだ」ということが分かっていたいただければ、
後はGoogleで検索すれば情報がたくさん出てくるので、都度調べて行けば習得可能です。

以上です。
WordPressのテーマカスタマイズってなに!?と調べまくった僕の知識を詰め込みました。
疑問が解消した方が一人いれば嬉しい限りです。

-CODE

Copyright© MasanoriBlog , 2020 All Rights Reserved.