ざっくり把握！WordPressで企業サイトを構築するまで手順
WordPressで企業サイトを構築する時のために、ざっくり作り方をまとめてみました。とっかかりとして、まずはここを押さえて基本を作れば、後はカスタマイズするのみです。既存のテーマをカスタマイズして作るのものいいんですが、余計なタグが残ったままになったり、解析するほうが時間がかかるので、イチから作ったほうが早いです。
目次
1.WordPressインストール
まずは、サーバーの環境に合わせたバージョンのWordPressをインストールします。
2.テーマの構成確認
wp-contentの中の、themes(テーマ)に新しくファイルを作っていきます。
ファイル構成としては
ーstyle.css
ーhome.php トップ用
ーindex.php 単体記事用
ーheader.php ヘッダー
ーsidebar.php サイドバー
ーfooter.php フッター
ーfunctions.php 各ページで使う関数群
となります。このファイルは構成によって変わるのですが、実はindex.phpだけでもOKです。他のテンプレートファイルがない場合、自動的にindex.phpが読まれます。
しかしこれだと各ページごとのタグをindex.php内に全て書かなければならず、使い勝手の悪いものになります。そのためヘッダーやフッター、サイドバーは分けたほうが一括で修正など管理がしやすいため、分けるのが一般的です。
home.phpはトップページと2階層目のレイアウトが違うため作っています。home.phpを置くことでトップページが開かれる時、優先的に読み込まれます。これらはテンプレート階層とよばれていて、ファイル名などルールがあります。
style.css内の先頭に以下を入れます。
/* Theme Name: テーマ名 Theme URI: テーマURL Description: 説明 Version: 1.0 Author: 作者 Author URI: 作者URL */
これを記述することで、管理画面からテーマを選べるようになります。
3.テンプレートにパーツを振り分ける
header.php
header.phpには
部分を入力します。この時、headの中にタイトルを表示させるタグと
<title><?php wp_title(‘ | ‘, true, ‘right’); ?><?php bloginfo(‘name’); ?>
<link rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
を入れておき、style.cssが記述されるようにします。
また、head内に記述している他のスタイルシートやスクリプトへのパスの部分は、<?php bloginfo(‘template_url’); ?>/aaa.cssのようにします。<?php bloginfo(‘template_url’); ?>には、テーマファイルまでのパスが自動的に入ります。
さらに</head>の直前に、<?php wp_head(); ?>を入れます。
footer.php
</body></html>の閉じタグと、各ページ共通で使うフッタータグがあれば記述しておきます。</body>の直前に<?php wp_footer(); ?>を入れます。
sidebar.php
サイドバーがあるサイトの場合は、sidebar.phpを作ります。管理画面のウィジェットと連携させたい場合は
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
ウィジェットが空の場合はここが表示されます。
<?php endif; ?>
を入れて、function.phpを作り
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2 class="widget_title">',
'after_title' => '</h2>',
));
を入れれば、ウィジェットと連動します。
home.php
トップページファイルです。これまで作ったファイルを読み込んで表示するよう記述します。
<?php get_header(); ?> <div id="contents"> トップコンテンツ </div> <?php get_footer(); ?>
index.php
記事ファイルです。2階層目以降で使うファイルです。
<?php get_header(); ?> <div id="contents"> <?php the_title(); //タイトル ?> <?php the_content(); //内容 ?> </div> <?php get_footer(); ?>
後は、用意されている関数を使いながらサイト毎にカスタムしていけばOKです。
[sc name=”engeneer”]
SHARE
スキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
YouTubeでも発信中！
PROFILE
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）