WordPressってなに？
WordPressのローカル環境構築ツール「Local By Flywheel」は、サーバ構築に関する知識がなくてもWordPressのローカル環境を構築できます。
Local by Flywheelを入手する
Local by Flywheelを公式サイトからダウンロードします。なお32ビット版のウィンドウズ環境は動作対象外です64ビット版ウィンドウズを搭載したPCまたはMacで進めてください。
フリーダウンロードボタンをクリックするとダウンロード画面が表示されますMacまたはウィンドウズのいずれかを選択し利用情報を入力しまします。
新規サイトを作成するローカルバイフライホイールの+クリエイトニューサイトボタンをクリックするとワッツ言わ歳頭頭ネームと言う画面が表示されます入力欄にこれから作成するサイトの名前を入力しますただしローカル場合フライホイールの画面では日本語が使えませんので半角英数字で入力してください。
入力後右下のコンテニューボタンをクリックしますなおこの名前はローカル環境のサーバ使用を設定できる中ではエンバイロメント画面が表示されます
PHPは新しいもの(数字が大きいもの)
WebServerはapache
DatabeseはMySQL
をそれぞれ選んでください。
WordPressで使う、ユーザーネーム、パスワード、メールアドレスを入力します。入力したものは忘れないようにしてください。
このような画面が出てきたら環境の構築完了です。
WordPressを日本語化するLocal by Flywheelで構築できるWordPress環境は英語版になっていますので日本語版に変更しますADMINボタンをクリックするとブラウザでWordPressのログイン画面が表示されますので先ほど指定したユーザ名とパスワードを入力しログインボタンをクリックします。
ダッシュボードが開きますので、左側のメニューバー内SettingからGeneralをクリックします。
SiteLanguageから日本語を選びます。
TimezoneはUTC+9にしてください。
SaveChangesを押して設定を保存します。
Local by Flywheel の画面内、右上がSTOP SITEとなっていれば、作動しています。
サイトを見たいときは、OPENサイトをクリックします。
サイト名の下、アイコンをクリックすると、ファイルの保存場所が表示されます。
試しにapp→public →wp-content→thermes 内に新しいフォルダー今回はMySite3というフォルダーを作り、中身が空index.php と style.css ファイルを入れてみてください。
管理画面の[外観]> [テーマ] 画面に表示され、有効化できることが分かります。
WordPress がインストールされたフォルダーの /wp-content/themes 以下には、WordPress のテーマがフォルダーごとに収められています。
WordPress のデフォルトテーマである Twenty Nineteen テーマの中身を確認してみると、多くのファイルから構成されていることが分かります。
しかし、WordPress テーマとして最低限必要なファイルは、実は次の2つだけです。
• index.php
• style.css
試しに/app/public /wp-content/thermes 内に新しいフォルダー今回はMySite3というフォルダーを作り、中身が空index.php と style.css ファイルを入れてみると、管理画面の[外観]> [テーマ] 画面に表示され、有効化できることが分かります。
今回は最初にブログの一覧ページから作ります。WordPressは元来ブログのためのソフトウェアであり、ブログページの制作から始めた方がわかりやすいためです。
style.cssにテーマ用のコメントを記述
WordPressテーマでは style.css内に、テーマに関する情報をCSS コメント形式で記述することになっています。
既定の項目は次の通りです。
Theme Name:テーマ名
Theme URI: テーマのアドレス
Author: テーマ作者名
Author URI: : テーマ作者のWebサイトのアドレス
Description: テーマの説明・紹介文
Version: テーマのバージョン
License : テーマに適用されるライセンス
License URI:ライセンスの内容が記載されたWebページのアドレスまたはライセンス条文が記載されたファイルへのパス
Tags:テーマの特徴を示すタグ(検索機能で使用)テーマをWordPress.org公式ディレクトリに登録しない場合は不要
Text Domain:テーマを国際化(翻訳対応)する際に必要。国際化しない場合は不要
公式テーマディレクトリに登録する場合を除けば、この中から必要な項目だけを記載すれば問題ありません。
ここでは、style.css の冒頭に次のように記述します。
@charset "UTF-8";
/*
Theme Name: MySyte
Author: MyName
Description: 学習成果を掲載するためのWordPressテーマ
Version: 1.0
*/CSS では @charset の記述は必ず1行目に書くという決まりがあります。CSS 内に日本語のコメントが含まれる場合には、文字化けを防ぐため1行目に @charset “UTF-8”;を記述し、テーマ用のコメントは2行目以降に記述します。
スクリーショット画像を追加
MySiteフォルダー内にscreenshot.pngという名前の画像を追加します。画像は何でもかまいません。テーマ選択画面に見本画像として表示されます。
有効化をクリックして、自作のテーマを適用してください。
子テーマのつくり方
テンプレートタグでサイト情報を出力していく
WordPressにはサイトを動かすためのWordPress専用のPHP関数が多数用意されています。これを「テンプレートタグ」といいます。HTML/CSSの記述とは変更しなければならない書き方もあるので、記述していきます。
<!DOCTYPE html>
<html <?php language_attributes();?>>
<head>
<meta charset=“<?php bloginfo(‘charset’);?>”>
<meta name="viewport" content="width=device-width" />
<?php bloginfo(‘name’);?>
<?php wp_head ?>
</head>
<body<?php body_class ?>>
<h1>モデル</h1>
<div id="test"></div>
<? php wp_footer ?>
</body>
</html>wp_headとwp_footer
これらのテンプレートタグは、WordPressが正しく機能するために必要です。</head>と</body>の直前に記述します。
bloginfo でサイトの基本情報を出力
bloginfoテンプレートタグは、charset以外にも色々な引数を指定できます。
bloginfo(‘name’); サイト名
bloginfo(‘description’); キャッチフレーズ
bloginfo (‘language’); 設定されている言語
body_classでページに合わせたクラスを表示
WordPressテーマ内のbody要素にはbody_classというテンプレートタグを追記することが奨励されています。条件や状態に合わせたclass名を出力します。
通常、cssやJavaScriptの読み込みはhead内で記述しますが、WordPressでは、functions.phpに記述します。
functions.phpファイルを作成する
function.phpはWordPressテーマの拡張機能を有効化したり、テーマ独自の機能を実装したりするためのファイルです。PHPのコードだけを記述することがほとんどです。少しとっつきにくいかもしれませんが、不可欠なものなので、一つずつ習得していきましょう。
テーマ内の functions.php を読み込むための記述は不要で、テーマフォルダー内に functions.phpと
いう名前のファイルが存在すれば、自動で読み込まれるようになっています。
functions.php が読み込まれているかどうか確認するため、ブラウザーからサイトにアクセスしてみましょう。ページの上部に「テスト」と表示されていれば、functions.php が読み込まれています。
テキストエディタを開き、新規ファイルを作成します。MySiteフォルダ内に、functions.phpという名前で保存してください。sがつくので名前に気をつけてください。
function mysite_scripts(){
wp_enqueue_style(
‘base-style’ ,
get_stylesheet_uri(),
array(),
‘1.0’,
‘all’,
);
}
add_action(‘wp_enqueue_scripts’ , ‘mysite_scripts’);このコードは「mysite_scripts」という関数を、WordPressがCSSを読み込むために用意してある「wp_enqueue_scripts」というタイミングで実行しなさいという意味です。「mysite_scripts」という関数名は何でもかまいません。
wp_enqueue_style関数
5つの引数を指定することができます。
base-style
ハンドル名です。CSS識別用のIDです。他の名前と同じにならないように気をつけてください。
get_stylesheet_uri
ファイルのパスの読み込みです。get_theme_file_uriなど、他の関数を使うこともできます。
array()
このCSSよりも先に読み込みたいCSSのハンドル名を指定します。特に指定がない場合は( )にしておいてくさい。
1.0
バージョン指定です。不要な場合はnullと記述すると、出力されなくなります。
all
メディアタイプ。通常はallでかまいません。
サイトコンテンツの最大幅の指定
WordPressでは、コンテンツ部分の最大幅を指定しておくことが推奨されています。今回は730pxとしておきます。
ループで投稿を表示させる
投稿データを出力する基本構造
if (have_posts()):
「もし投稿が１件以上あれば」という条件分岐です。
while(have_posts()):
「投稿がある間は処理を繰り返す」という意味です。投稿１件分の処理を繰り返すループ処理です。
the_post();
「次の投稿へ進める」という意味です。
endwhile;
繰り返し処理 while(have_posts()):の終了部分です。
endif;
if(have_posts()); の条件分岐の終了です。
共通部分のファイルを分ける
個別の投稿ページをつくる
固定ページをつくろう
固定ページ用のテンプレートファイルとして、page.phpを作成します。
アイキャッチ画像を設置しよう
を追加することで、アイキャッチ画像機能が有効になり、投稿作成画面にアイキャッチ画像が設定できるようになります。
set_post_thumbnail_sizeでアイキャッチ画像の大きさを指定します。
アイキャッチ画像を表示させたい場所に
を記述します。
問い合わせページを作成する
MW WP Formプラグインを使ってメールフォームを設置します。
フォームの入力項目をショートコードを使って入力していきます。
ショートコード・・・WordPress上で、特定のプログラム処理を実行するための[ ]で囲まれた短いコードのこと。
作成したフォームを「お問い合わせ」固定ページに設置するために、[フォーム識別子]の欄に表示されているショートコードをコピーして固定ページに貼りつけます。
ウィジット機能を追加する
あらかじめWordPress側に設置された様々なサイトパーツを手軽に配置できるのが「ウィジェット機能」です。
テーマのfunctions.phpでウィジェットエリアを登録することで、サイト上の任意の場所にウィジェットを配置できるようになります。
register_sidebarはウィジェットエリアを登録するための関数です。
関数名にsidebarと入っていますが、設置箇所はサイドバーに限りません。
ウィジェットを表示させたい箇所に
テンプレートタグを記述する必要があります。
カテゴリーページをつくる
カスタムメニューを実装する
HTMLを反映させたカスタムメニューの設置のさせ方です。少しややこしいのですが、じっくり取り組めば慣れてくると思います。
検索機能の実装
検索機能を実装していきます。 WordPressで作ったサイトに検索機能があれば、読者と運営者にとってWin-Winな関係を望めます。
WordPressの検索機能は、
search.php
searchform.php
という2つのテンプレートから作られています。
search.phpには検索結果を表示するときのコード、searchform.phpには検索フォームと検索ボタンを作るコードが記述されています。
検索機能は、複数キーワードで検索することもできますが、半角スペースで区切る場合にしか対応していません。
まずは検索フォームエリア・テンプレートを用意します。
テーマディレクトリにテンプレートファイル「searchform.php」を作成します。
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" name="s" id="s" placeholder="SEARCH"/>
<button type="submit">検索する</button>
</form>作った検索フォームのテンプレートは、関数 get_search_form で好きな場所に呼び出すことができます。
<?php get_search_form(); ?>次に検索結果を表示するためのページテンプレート search.php を作成します。
テーマディレクトリにテンプレートファイル「search.php」ファイルを作成します。
<?php if (have_posts()): ?>
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '検索キーワード未入力'; // 検索キーワードが未入力の場合のテキストを指定
} else {
echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
}
?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
検索されたキーワードはありませんでした
<?php endif; ?>カスタム投稿を表示させる
いよいよWordPressのカスタムをしていきます。まずは投稿設定をカスタムしていきます。
カスタアム投稿のテンプレートをつくる
single-$posttype.phpというファイルをつくり、カスタム投稿を表示させます。
カスタム投稿のリストを表示させよう
固定ページ型のカスタム投稿タイプ
WordPressをサーバへアップロード/移行
１、レンタルサーバを契約する
エックスサーバー をつかってアップロードつくったテーマをアップロードしていきます。サーバの
設定が完了次第、「設定完了のお知らせ」メールが来るので、大切に保管しておきましょう。
２、ドメインにSSL証明書を設定する
エックスサーバ登録時に自動で発行される初期ドメイン(アカウント名.xserv.jp)を使います。好きな名前のドメインを設定したいときは、お名前.com から取得することができます。
３、ローカル環境のデータベースをバックアップする
ローカル環境から公開サーバへデータを移行していきます。
・データベース
・その他据えてのファイル群
データベースに移行は、WP Migrate DBというプラグインを使います。
４、wp-config.phpファイルのデータベース情報を編集
現状、ローカル環境の WordPress は、Local by Flywheel が自動で作成したデータベースで稼働しています。 このままアップロードするだけでは、データベース名やユーザー名、パスワードがエックスサーバーで作成したものと異なるため、正常に動作しません。 WordPress に設定されているデータベースの接続情報を変更する必要があります。
WordPress では、データベース情報を wp-config.php ファイルで管理しています。 エックスサーバー上にデータをアップロードする前にwp-config.php ファイルを編集して、 エックスサーバーのデータベース情報を設定する必要があります。
なお、ローカル環境のデータベース情報を書き換えてしまうとLocal by Flywheel 上の WordPress
にアクセスできなくなってしまうので、 一旦 wp-config.php ファイルを別名で複製 (wp-config_
xserver.php) し、 こちらを編集します。
wp-config_xserver.php ファイルをテキストエディターで開き、記述をエックスサーバーのものに変更します。
5、サイトデータをFTPクライアントでアップロードする
