2016.10.12 Wed

HTMLをWordPress化する時の手順リスト

皆さんこんにちは、前田です。
HTMLで作成した、Webサイトをwordpressを使って、新着情報の更新や、イベント情報の更新などをしやすいようにするということがありますが、その方法がわからないという方もいらっしゃると思います、そのような方を対象に記事を書きますので参考までに見ていただけると幸いに思います。

さて、HTMLをWordpress化するときの手順が何点かありますので、下記に手順を書いていこうと思います。

目次／このページでわかること

読み込みファイルのパスを変える(css、js、image)

ローカルで作成するとcss、images、jsのフォルダは下記のように相対パスになっているとおもいますが、wordpressでは相対パスでは表示されませんので、読み込みファイルのパスを下記のように書き換えます。

HTML

<link rel="stylesheet" href="style.css">

WordPress

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

index.htmlを3つのファイルに分ける

header、footer、sidebarなどは共通部分になるので共通化できる分は共通化しましょう。共通化をすることにより、header、footerなどの修正が大幅に楽になりサイトの管理が容易になります。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

3つのファイルを作ったら、上記のようにindex.phpに共通部分を読み込みましょう。

header.phpをwordpress用に編集する

【descriptionの設定】
html

<meta name="description" content="サイトの説明文です。">

WordPress

<meta content="<?php bloginfo('description'); ?>">

【サイトのタイトル】
html

<title>ページ名 | サイトのタイトル</title>

WordPress

<?php wp_title('|', true, 'right'); bloginfo('name'); ?>

リンク要素(a要素)のhrefの書き方

<a href="index.html">

<a href="<?php echo home_url(); ?>">

また、固定ページへのリンクは以下のように書きます。

<a href="<?php echo home_url(); ?>/スラッグ名">

wp_head()、wp_footer()を追記する

</head>

<?php wp_head(); ?>
</head>

</body>

<?php wp_footer(); ?>
</body>

サイトの上部にwordpressの管理バーが表示されない場合や、プラグインの設定に問題がないのに上手く動かない場合は、wp_headかwp_footerが抜けている場合が多いです。

sytle.cssを編集する

wordpressにはサイトのデザインを表現するcssだけではなく、wordpress上のテーマの場所や、テーマの名称、テーマの作成者などを指定するために、style.cssの上部に下記のコードを書く必要があります。

/*
Theme Name: Original Theme
Theme URI: https://www.genius-web.co.jp/blog/
Description: 株式会社ジーニアスウェブのオリジナルテーマ
Author: ジーニアスウェブ
Author URI: https://www.genius-web.co.jp/
*/

themeフォルダにアップロードする

上記の手順が終わったらthemeフォルダにファイルをアップロードしましょう。
wordpress管理画面の外観をクリックし、自分の作成したテーマがあれば、そのテーマを有効化しましょう、そうすることにより、オリジナルテーマとしてサイトが表示されます。
もし表示されない方は、もう一度手順を確認し、作業をしましょう。