harukarist.work

未経験からWebエンジニアを目指す!

【ウェブカツ】プログラミング学習4ヵ月目~WordPress部でつまづいた点まとめ

f:id:harukaweb:20200229235330p:plain

こんにちは。晴香(@harukarist)です。Webエンジニアになりたくて、昨年11月からウェブカツの女性割引でプログラミングを学び始めて4か月が経ちました。

今回は主に、WordPress部について、学習した中で難しかった内容をまとめていきます。現在ウェブカツで学習中の方や、ウェブカツへの入部を検討している方、プログラミングを始めた方に少しでも参考になれば嬉しいです。

前回の進捗状況はこちらからどうぞ。 www.harukarist.work

プログラミング進捗状況

ウェブカツ 4ヵ月間の活動時間合計

  • ウェブカツ受講 181 h

  • アウトプット(OP) 108.5 h

  • その他補足学習 37 h

    →合計 326.5 h

4ヵ月目(2020年2月後半)の活動内容

  • WordPress部 Lesson12まで(完了)

  • js・jQuery部中級 Lesson18まで(全33レッスン中)

  • その他 Webサ部OPの不具合修正、GitHubへのコミットなど

2月後半はインプット中心のプログラミング学習でした。WordPress部ではレッスンに沿って自作テンプレートを作成しました。

js・jQuery部中級では、Ajax通信によるEmail重複チェック、ボタンの活性・非活性制御、モーダルの実装を行い、javascriptの言語仕様についてより深く学びました。

今回は、WordPress部の中で特に難しいと感じた点について、以下にまとめてみます。

WordPress部ざっくりまとめ

WordPressとは

WordPressはWebサイトを構築するCMS(Content Management Sysytem)の1つ。

CMSでサイトを作ることで、プログラミングを知らない人でも簡単にサイトの更新ができる。

Web上の35%のサイトはWordPressで構築されている。

WordPressとMovable Typeとの違い

WordPressの特徴

  • オープンソースのCMS。誰もがWordPressの開発に参加できる。

  • 商用でも無償で利用可能

  • 世界最大シェア。プラグインやテンプレートが充実

  • 動的ページでの運用(アクセスごとにサーバのDBから情報を生成)

    • メリット:修正をすぐにサイトに反映できる(再構築が不要)、CMS自体の動作が軽い

    • デメリット:アクセスが集中すると重くなる

Movable Typeの特徴

  • シックス・アパート株式会社が提供する日本製のCMS。

  • 商用利用の場合、ライセンス料が必要

  • WordPressに比べてプラグインやテンプレートが少ない。

  • 静的ページでも動的ページでも運用可能(静的ページの場合、あらかじめ生成したhtmlファイルを公開)

    • メリット:アクセスが集中しても負荷が少ない

    • デメリット:記事を更新するたびに再構築の作業が必要

10年ほど前にMovable Typeで趣味のサイトを作ったことがあったのですが、この記事によると2006年頃からWordPressのシェアが伸びて逆転しているようです。 wordpress.siyouyo.com

無償で使えて、再構築が必要なく、プラグインもテンプレートも多く、世界中に情報も豊富、という点で日本でもWordPressが広く使われているんだろうなと思いました。

ローカル開発環境の作り方

環境構築の方法は一番忘れやすい気がするのでメモ。(Windows・XAMPPの場合)

  1. phpMyAdminからDB、ユーザーアカウントを作成

  2. 公式サイトからWordPressファイルをダウンロード

  3. ダウンロードしたファイルを解凍してローカルサーバ(C:\xampp\htdocs\)内に配置

    今回は C:\xampp\htdocs\wordpress に配置

  4. WordPress管理画面(ダッシュボード)にアクセス

    上記のディレクトリに配置した場合、URLはhttp://localhost/wordpress/wp-admin/ となる

  5. 1で作成したDB名、ユーザーアカウントなどを入力してインストールを実行

  6. テンプレートの作成

テンプレートファイルは「wp-content」ディレクトリ内の「themes」ディレクトリ内に格納する。

今回は C:\xampp\htdocs\wordpress\wp-content\themes\sample 内に作成。

※ちなみに、

  • 管理画面からアップロードした画像などは「wp-content」の「uploads」ディレクトリ

  • インストールしたプラグインのファイルは「wp-content」の「plugins」ディレクトリ

に格納される。

管理画面にテンプレートを表示させる方法

テンプレートには最低限、以下のファイルが必須。

  • index.php 最初に表示される画面

  • style.css  スタイルシート

  • screenshot.png 管理画面に表示するテンプレートのスクリーンショット画像

WordPressにテーマの情報を認識させるため、style.cssの冒頭部分には以下のようなコメントが必要。

/* Theme Name: サンプルテーマ
Author: harukarist
Description: サンプルで作ったテーマです。 */

テーマの作成 - WordPress Codex 日本語版

上記を作成すると、WordPress管理画面の「外観→テーマ」に表示されるので、「有効化」をクリックすると自分で作ったテーマに切り替わる。

共通パーツを切り出し

WordPressには header.php、footer.php、sidebar.php を呼び出す関数が標準で用意されていて、表示したい部分に以下のように書くだけでphpファイルを呼び出すことができる。

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

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

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

これら以外のパーツを切り出したい場合は、ファイル名を「スラッグ名-テンプレート名.php」とすると、「get_template_part()」という関数で呼び出すことができる。

  1. 共通パーツ用のファイル「スラッグ名-テンプレート名.php」を作る(テンプレート名は省略可能)

  2. 表示したい場所に以下を記述して呼び出し

    <?php get_template_part( 'スラッグ名', 'テンプレート名' ); ?>

※ちなみにここで私は「template」を何度も「templete」と書いていました。。eteじゃなくてate!

投稿ページと固定ページ

WordPressには「投稿ページ」「固定ページ」の2種類がある。

投稿ページ

  • ブログ記事や新着情報など、時系列があって更新頻度の高いページ向け。
  • テンプレートは1種類。
  • カテゴリやタグをつけられる。

固定ページ

  • 会社概要、問い合わせフォームなど、更新頻度の低いページ向け。
  • 複数のテンプレートを使い分けることができる。
  • カテゴリやタグはつけられない。

固定ページの先頭にはテンプレート名をコメントで記述する必要あり。

<?php
/*
 Template Name: (例)インフォメーション
*/
?>

投稿した記事を表示するには、WordPressの関数 have_posts()the_post()the_content() を使う。

<?php if (have_posts()) :
  while (have_posts()) : the_post(); ?>
  <!-- 記事を表示 -->
  <?php the_content(); ?>
  
  <?php endwhile;
else : ?>
  <!-- 記事がない場合の処理を記述 -->
<?php endif; ?>

ファイル名による優先順位

WordPressのテンプレートは、ファイル名によって表示する優先順位が決まっている。 カテゴリー別に表示するページの場合、以下の優先順位で表示される。

  1. category-slug.php

  2. category-ID.php

  3. category.php

  4. archive.php

  5. index.php

テンプレート階層 - WordPress Codex 日本語版

カスタムフィールドの作成

カスタムフィールドを使うと、管理画面上にフォームを設置し、そのフォームに入力した情報をWebサイト上に表示させることができる。

カスタムフィールドは、以下の4つの関数を作って実装する。

  • WordPressのadd_action() 関数

  • 自作のカスタムフィールド定義用関数

  • 自作のカスタムフィールド表示用関数

  • 自作のデータ保存用関数

add_action() 関数はWordPressの「アクションフック」という機能で、○○の時に××を実行する、という処理を指定することができる。

関数リファレンス/add action - WordPress Codex 日本語版

functions.php に以下のように関数を記述する(一部省略)

<?php

// 管理画面にカスタムフィールドを表示するアクションフック
add_action('admin_menu', 'カスタムフィールド定義用関数A');

// データを保存するアクションフック
add_action('save_post', 'データ保存用関数C');

// 入力項目をどの投稿タイプのページに表示させるかを設定
function カスタムフィールド定義用関数A(){
  add_meta_box('管理画面上のカスタムフィールドのid属性名', 'カスタムフィールドの名前', 'カスタムフィールド表示用関数B', '表示する場所(投稿ページならpost,固定ページならpage)', '配置順序');
}

function カスタムフィールド表示用関数B(){
    global $post;
    echo 'コメント:<textarea …>' . get_post_meta($post->ID, 'キー名', true) . '</textarea><br>';
}

function データ保存用関数C($post_id){
  // カスタムフィールドに入力されたデータを格納
  if (isset($_POST['sample'])) {
    $sample = $_POST['sample'];
  }
  // 入力されたデータとDBの内容が異なる場合はDBのデータを更新
  if ($sample != get_post_meta($post_id, 'sample', true)) {
    update_post_meta($post_id, 'sample', $sample);
  // 入力されたデータが空の場合はDBのデータを削除
  } elseif ($sample == '') {
    delete_post_meta($post_id, 'sample', get_post_meta($post_id, 'sample', true));
  }
}

実際にカスタムフィールドの内容を表示したい箇所には以下を記述する。

<?php echo get_post_meta($post->ID, 'キー名', true); ?>

複数のカスタムフィールドを作るには、

  • 「カスタムフィールド表示用関数A」にadd_meta_box()を追加

  • 「フォーム出力用関数B'」を作成

で作ることができる。

add_meta_box()、get_post_meta()については以下を参照。

関数リファレンス/add meta box - WordPress Codex 日本語版

関数リファレンス/get post meta - WordPress Codex 日本語版

カスタムウィジェットの作成

入力した情報を並べ替えたい場合などはカスタムウィジェットを使う。

カスタムウィジェットは、以下の3つの関数を作ってプログラミングする。

  • WordPressのadd_action() 関数

  • 自作のウィジェットエリア作成用関数

  • 自作のウィジェット作成用クラス

functions.php に以下のように関数を記述する(一部省略)

<?php

// ウィジェットエリアを作成する関数
add_action('widgets_init', 'ウィジェットエリア作成用関数');

// ウィジェット自体を作成するクラス
add_action('widgets_init', function () {
  register_widget('ウィジェット作成用クラス');
});

// ウィジェットエリアを作成
function ウィジェットエリア作成用関数(){
  register_sidebar(array(
    'name' => '右サイドバー',
    'id' => 'my_sidebar',
    'before_widget' => '<div>',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
  ));
}

// ウィジェット作成用クラスを定義(WordPressのWP_Widgetクラスを継承)
class ウィジェット作成用クラス extends WP_Widget{
  // コンストラクタ
  public function __construct(){
    parent::__construct(false, $name = 'サイドバー');
  }

  // ウィジェットの入力項目を作成
  function form($instance){
  }

  // ウィジェットに入力された情報を保存
  function update($new_instance, $old_instance){
  }

  // 入力された情報を取得してhtmlを生成
  function widget($args, $instance){
  }
}
?>

ウィジェットを表示したい場所に以下を記述する。

<?php dynamic_sidebar('my_sidebar'); ?>

関数リファレンス/register sidebar - WordPress Codex 日本語版

関数リファレンス/dynamic sidebar - WordPress Codex 日本語版

以上、覚え書きですが、WordPress部のプログラミング学習にあたって難しかった部分をまとめました。

3月前半のプログラミング予定

  • js・jQuery部中級の受講

  • HTML・CSS部 中級の受講

現在はjs・jQuery部中級の学習中です。しばらくは言語仕様の学習が続きそうなので、早くアウトプットしたいというもやもやもありますが、ここでしっかり基礎を理解することが後々のアウトプットでも重要になってくると思うので、自分でもレッスン動画の内容を書きながら土台を固めていきたいです。

HTML・CSS部 中級でアニメーションやスマホ対応までインプットして、3月下旬にはWordPressの自作テンプレートでサイトを作っていけたらいいなと考えています。

そもそもウェブカツとは

ウェブカツは、「本気で年収1千万円稼ぎたい人のためのオンラインプログラミング学習スクール」です。

プログラミングだけでなく、設計、インフラや、営業、マーケティングまで、実務で使えるスキルを幅広く学べるカリキュラムになっています。

現在、「HTML・CSS部入門」「Ruby on Rails部」に加えて、「インフラ部」(全56レッスン!)も無料で公開されています! 受講を迷っている方はぜひいちど体験してみてください。

webukatu.com

それではまた!