ざっくり把握!WordPressで企業サイトを構築するまで手順

2018/03/23更新 カテゴリー:開発奮闘記 タグ: ,
  • このエントリーをはてなブックマークに追加

WordPressで企業サイトを構築する時のために、ざっくり作り方をまとめてみました。とっかかりとして、まずはここを押さえて基本を作れば、後はカスタマイズするのみです。既存のテーマをカスタマイズして作るのものいいんですが、余計なタグが残ったままになったり、解析するほうが時間がかかるので、イチから作ったほうが早いです。

SPONSOR

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
*/

これを記述することで、管理画面からテーマを選べるようになります。
テーマ

SPONSOR

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です。

フリーランスエンジニアの稼ぎ方

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾/サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中! (詳しいプロフィール)
WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす