はじめての方向けにWordPressへの移行手順を書いています。
ちょっと長くなるので、この記事ではトップページの作成について記載しています。子ページについては別記事でご紹介しようと思います。
WordPressは、まずCMSとして利用できるといったメリットがありますね。
サイト内のニュースリリースを追加、バナーの差し替え、新しい記事やページの追加など、わざわざコードを書き換えなくても管理画面で編集できます。なのでコーディングの知識がない人でも割と簡単に更新作業が可能です👌
でもこれはあくまでも、更新者が使いやすいように管理画面までカスタマイズした場合です。
必要な項目以外は非表示にする・誤ってコンテンツを削除しないよう対策するなど、phpファイルを編集する必要があり、初心者にはなかなか難易度が高いです😨
なので初心者がWordPressサイトを作る際のメリットといえば、プラグインが豊富で気軽にいろんなシステムを実装できる、といったところでしょうか☺️
たとえばお問い合わせフォームを簡単に設置できたり、ECサイトを作れるプラグインもあります！ 他にもSEOを最適化のプラグイン、セキュリティのプラグインなど種類が豊富です。
なので、サイトのWordPress化＝オリジナルテーマの作成という事になりますね。
ではさっそく作成した静的サイトをWordPress化していきます。
現状のディレクトリ構造は以下の想定です。
テーマの名前を決めて、rootのフォルダ名をリネームしておきましょう。
以下はindex.htmlのサンプルです。ヘッダー、コンテンツ、フッターとエリアが分かれているので、これを分割していきます。
asatomemo<!-- ここからヘッダー（header.phpに記述） -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no viewport-fit=cover">
<title></title>
<meta name="description" content="" />
<script type="text/javascript" src="/assets/js/common.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/common.css">
</head>
<body>
<header>
<div id="header">
<!-- #header --></div>
</header>
<!-- ここからコンテンツ（index.phpに記述） -->
<div id="wrap">
<div id="contents"></div>
<aside id="sidebar"></aside>
<!--#wrap--></div>
<!-- ここからフッター（footer.phpに記述） -->
<footer>
<div id="foot"></div>
</footer>
</body>
</html>
このようにコードを分割し、ヘッダーとフッターをindex.phpにインクルードさせます。index.php、header.php、footer.phpはindex.htmlをリネームして作成しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no viewport-fit=cover">
<title></title>
<meta name="description" content="" />
<!-- ① --><script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/common.js"></script>
<!-- ② --><link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" /">
<!-- ③ --><?php wp_head(); ?>
</head>
<body>
<header>
<div id="header">
<!-- #header --></div>
</header>
作成するテーマは下記のディレクトリに置かれます。
/htdocs/wp-content/themes/テーマ
テーマ独自のjsや、style.css以外にcssを追加する場合（後述）のパスはテーマディレクトリからのルートパスで記述し、頭に下記をつけましょう。
<?php echo get_template_directory_uri(); ?>
これは使用するテーマフォルダのパスを取得するタグです。ローカルでも確認できるし、わざわざ絶対パスで記述する必要がないので楽です。これは画像を読み込む場合も同様です。
WordPressには独自のルールがあり、style.cssとindex.phpがテーマディレクトリ直下にないとテーマが壊れていると見なされてしまいます。なので今回の構造だとcommon.cssはリネームして格納場所を移動させなければなりません💦ブログ冒頭でお伝えした構造変えるかも、とはこの事です。
/assets/css/common.css を /style.css となるよう修正します。
style.cssを呼び出すタグは<?php echo get_stylesheet_uri(); ?>です。パスをこちらに変更しましょう。
スタイルシートは分けてフォルダに格納したい派なので、構造そのまま使えるよう模索したのですが、これだけはしょうがないみたいです😨
<head>内には必ず<?php wp_head(); ?>のタグを入れましょう。
WordPress側で出力される情報を取得するタグです。プラグインのcssやjsなどもここに出力されるので、これがないとWordPressとして機能しません。
では残り2ファイルも作っていきます。
<footer>
<div id="foot"></div>
</footer>
</body>
</html>
<?php
/*
Template Name: トップページ
*/
?>
<?php get_header(); ?> <!-- ←ヘッダーのインクルードタグ -->
<div id="wrap">
<div id="contents"></div>
<aside id="sidebar"></aside>
<!--#wrap--></div>
<?php get_footer(); ?> <!-- ←フッターのインクルードタグ -->
get_header();とget_footer(); のタグでヘッダー/フッターを読み込んでいます。
これで複数ページに設置するであろうパーツを一括管理が可能になります👌WordPressサイト以外でもよく使われていますね。ページ数が多い程効率的です😊
まず、Wordpressがテーマ情報を認識できるよう、最低でも下記をstyle.css冒頭に記述してあげます。
/*
Theme Name: テーマの名称
Author: テーマ作者の名前
Description: テーマの説明
Version: 1.0
*/
またcssで背景画像などを指定している場合は相対パスに修正する必要があります。絶対パスでも読み込めますが、メンテナンスを考えるとよろしくないですね。あとめんどくさいし。。
imagesファイルがassetsの中にあるとすると、
× → url(‘/assets/images/base/logo.svg’)
○ → url(‘../assets/images/base/logo.svg’)
となります。
WordPressはもともとJqueryも使えるようになっています。ちなみに本サイトは仕様的にCDNライブラリからjqueryを読み込んでいます。もし外部のjqueryを使いたい場合は下記の方法で使用可能です。昔jsが動かず結構苦戦した覚えがあるので参考までに！
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '1.12.4');
?>
必要であればjqueryのバージョンを変更して使ってください。
こちらはcommon.jsを読み込む前に記述します。
ファイルの修正が終わったら、ローカルなりサーバーにアップするなりして表示確認です。この流れで作業すると基本的に問題ないかと思います。
最初は仕組みを理解するのにかなり時間がかかると思います。
ゆっくりでもいいので、ぜひWordPressでサイトを作成してみてください！製作者の方は特に、とても勉強になると思います☺️
ページトップへ
テーマとは？
WordPress内で使用する構成やデザインのテンプレート。
データベースに入力された情報を、どの場所にどのように出力するかの設定ができます。
トップページだけではなく、子ページもそれぞれ独自に構成することができます。