ワードプレス（wordpress）でオリジナルサイト作成

ワードプレス（wordpress）でオリジナルサイト作成「教えてマリオ」

ホーム>>教えてマリオトップ>>ワードプレス（wordpress）でオリジナルサイト作成

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。難しい言葉を使わず（使えない）噛み砕いた言葉で書いていくので、参考になればと思います。
＊勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

ワードプレス（wordpress）でオリジナルサイト作成

2012年9月11日
wordpress

今回はワードプレスでオリジナルサイトの作成方法をざっくりと大まかに説明したいと思います。テンプレートではなくオリジナルのホームページでＣＭＳサイト（ＨＴＭＬの知識がない人でも指定した場所を簡単に更新できるサイト）ととして構築していきたいと思います。

ホームページを作る
ワードプレスをサーバーにインストール
ワードプレスの初期値の設定
HTMLで作ったサイトをワードプレス用に書き直す
カスタム投稿を使って最新情報をお客さんが更新できるようにする
カスタムフィールドテンプレートを使てメニュー画像をお客さんが更新できるようにする

1.ホームページを作る

まずはＨＴＭＬでホームページをローカルで作成します。ワードプレス上でタグを書きこんでサイト作成される方もいらっしゃると思いますが、ここでは先にＨＴＭＬで大まかにホームページを完成させておきます。

先に作っておくとあとはワードプレス用のタグを少し追加したりするだけで終わるので、簡単です。

こちらはＨＴＭＬの完成見本です。

全体像は下記のとおりです。

手抜きな感じですいません。

かなり小規模なサイトですが、こちらをワードプレスでＣＭＳサイトとして作成してみたいと思います。

練習用でHTMLサイトをダウンロードされたい方は下記から

HTMLサイトダウンロード

▲目次へ戻る

2.ワードプレスをサーバーにインストール

次にワードプレスをサーバーにインストールします。インストール方法は今回はヘテムル（レンタルサーバーの名前）でのインストール方法を説明したいと思います。
サーバーがヘテムルでない方は、検索するとインストール方法はたくさん出てきますのでそちらを参照してください。

最近のレンタルサーバーは高機能なものが多くワードプレスを簡単にインストールすることができます。
ヘテムルにもこの簡単インストール機能がついています。では説明して行きます。
まずはヘテムルのコントロールパネルにログインします。
次にデータベースを作ります。（先に作っておかなくても自動で作ってくれるのですがあとでどのデータベースがどのサイトで使われているかわからなくならないよう、先に名前を指定して作成しておきます。）

ログインされるとデータベースという項目があるのでそちらから作成。
＊データベースとは簡単に説明すると、記憶装置みたいなものです。（投稿した記事を記憶して管理してくれる）
任意の名前（お好きな名前）でデータベースを作成したら次に簡単インストールという項目をクリックします。すると一覧で出てくるのでワードプレスをクリックしてインストールするフォルダとデータベース（先ほど作ったもの）を指定してインストールしてください。

次に設定をしインストールを完了させます。先ほどインストールした場所をインターネットでアクセスします。例）http://wpsite123456789.comにインストールされたのならhttp://wpsite123456789.comをそのままインターネットでアクセス

すると下記のような画面が出てきます。
インストール画面
すべての項目を入力し一番下にあるwordpressをインストールをクリックすると完成です。
そのままログインボタンをクリックすると下記のようなログイン画面が出てきます。

先ほど入力したユーザー名とパスワードを入力してログインしてください。
以上で完成です。

▲目次へ戻る

3.ワードプレスの初期値の設定

次にワードプレスの初期値の設定をします。

ワードプレスにログインしてください。
まずは投稿・リンク・固定ページ・コメントにテスト投稿がしてあるので、そちらを削除しておきます。

次に設定から一般をクリックしキャッチフレーズや時刻・日付などをお好きな設定に変更してください。＊キャッチフレーズはディスクリプション的な扱いです。

次に設定からパーマリンクに行きパーマリンクの設定をします。これは表示されるアドレスの表示設定です。ここでは/%postname%/として記事のタイトルが表示されるようにします。

これで必要最低限の初期設定は完了です。あとはその時々に合わせて、画像のサイズや表示設定などを行ってください。

▲目次へ戻る

4.HTMLで作ったサイトをワードプレス用に書き直す

すでに準備してあるＨＴＭＬで作ったサイトをワードプレス用にカスタマイズしていきます。
まずは書き換える前に必要なファイルを作成し、ＨＴＭＬで作成したサイトのフォルダの中に入れておきます。
作るのはfunctions.phpとstyle.cssです。
名前は決まっていますのでファイル名は変更せずにこのまま作ってください。
とりあえずfunctions.phpは空白でいいです。functions.phpは設定を書き込むファイルです。

style.cssには下記の文章を入れてください。

/*

Theme Name:テーマの名前
Theme URI:テーマのURL
Description: テーマの説明 
Author: テーマの著作者
Author URI: テーマの著作者のURL

*/

@import url(css/import.css);

style.cssはワードプレスで一番初めに読み込まれるcssファイルでcssを記述するファイルですが、今回はすでにcssはcssフォルダの中に作っていますのでcssフォルダの中にあるimportしているファイルをimportしています。（説明が下手ですいません）

/*

Theme Name:テーマの名前
Theme URI:テーマのURL
Description: テーマの説明 
Author: テーマの著作者
Author URI: テーマの著作者のURL

*/

@import url(css/general.css);
@import url(css/main.css);
@import url(css/cleafix.css);

でも同じです。コメントアウトしている部分は入れないといけないものみたいですので皆さんのお好きなものに書き換えてください。

次ににトップページをプリントスクリーンしてサイズ300×225でscreenshot.jpgという名前でhtmlと同階層に作成します。
これは別になくてもいいですが、オリジナルのテーマを決める時にサイトの画像が出てくるので見やすいです。（かなり自己満足的なものですが）

最後にindex.phpを作成します。このファイルにはなにもかかなくていいです。

以上で追加するファイルの準備ができたので次は書き換えていきたいと思います。

＊更新機能をつける最新情報とメニューの部分は最後書き換えます。

まずはトップページを変更していきます。今回トップページはhome.phpとします。ですのでindex.htmlをhome.phpにファイル名を変更します。

では中身を書き換えます。現在は

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ワードプレスでホームページを作る</title>
<meta name="keywords" content="ワードプレス,ホームページ,作る" />
<meta name="description" content="ワードプレスでホームページを作る練習をしています。" />
<link href="css/import.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/smartRollover.js"></script>
<body>
<div id="wrap">
    <h1>ワードプレスでホームページを作る</h1>
    <div id="header">   
        <img src="img/header01.jpg" alt="ようこそ" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
        	<li><a href="index.html"><img src="img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="menu.html"><img src="img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="com.html"><img src="img/btn03_off.jpg" alt="会社概要" /></a></li>
        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="news">
        	<h2>最新情報</h2>
        	<dl class="clearfix">
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            </dl>
            <p class="t_r"><a href="newsall.html">一覧を見る>></a></p>
        </div>
        <!--▲news_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="index.html">ホーム</a>|</li>
            <li><a href="menu.html">メニュー</a>|</li>
            <li><a href="com.html">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
</body>
</html>

です。

これをワードプレス用に書き換えると下記のようになります。＊最新情報の部分はあとで記述します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></title>
<meta name="keywords" content="ワードプレス,ホームページ,作る" />
<meta name="description" content="<?PHP bloginfo("description");//ブログのキャッチフレーズを出力?>" />
<link href="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/css/import.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/js/smartRollover.js"></script>
<?PHP wp_head();//headの最適化競合防止など?>
</head>
<body>
<div id="wrap">
    <h1><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></h1>
    <div id="header">   
        <img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/header01.jpg" alt="ようこそ" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn03_off.jpg" alt="会社概要" /></a></li>
        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="news">
        	<h2>最新情報</h2>
        	<dl class="clearfix">
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            </dl>
            <p class="t_r"><a href="newsall.html">一覧を見る>></a></p>
        </div>
        <!--▲news_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>">ホーム</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/">メニュー</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
<?PHP wp_footer();//footerの最適化?>
</body>
</html>

こんな感じです。すごく複雑にみえますが、まとめると全然複雑ではありません。

ワードプレスは基本的に絶対パスで読み込もうとするのでリンクや画像は絶対パスで書かなければいけません。しかしワードプレスは絶対パスを表示させるテンプレートタグを用意してくれています。
このページで使っているテンプレートタグは6つだけです。

１）

<?PHP bloginfo("name");?>

これはブログのタイトルを出力してくれます。ですので、タイトル部分と、h1の部分に入れています。

２）

<?PHP wp_title("");?>

これは記事・ページのタイトル出力してくれます。トップページでは関係ありませんが、あとでヘッダー部分を部品化しますので、サブページの時に使用します。（サブページのタイトルの入れ方をサイトのタイトルプラスページのタイトルにしたいため。）

３）

<?PHP bloginfo("template_url");?>

これはテーマフォルダのＵＲＬを出力してくれます。簡単にＩＭＧの前とＣＳＳの前とＪＡＶＡＳＣＲＩＰＴの前に書くと覚えておきましょう。

４）

<?PHP echo home_url();?>

これはトップページへのリンクを表示してくれます。トップぺージはそのままで、その他ページはリンク先の前に書くと覚えておきましょう。今回のサブページの部分はhttp://www.mariodesign.net/menu/などになっていますがこれは後程メニューページを作成するときに説明します。

５）

<?PHP wp_head();?>

これはheadの最適化をしてくれjqueryの競合防止などをしてくれます。headの閉じタグの前に入れておきましょう。

6）

<?PHP wp_footer();?>

これはfooterの最適化をしてくれます。bodyの閉じタグの前に入れておきましょう。

上記の6つだけです。意外に簡単ですね。
覚えるまでは上記サンプルのように末尾にコメントアウトを入れておくと迷わなくてよいのでお勧めです。

ではここでいちどアップロードしてみたいと思います。

先ほどワードプレスをインストールされたフォルダにいれます。しかし入れる場所がポイントです。オリジナルのテーマは、テーマフォルダの中に入れなければなりません。

先ほどワードプレスをインストールされた任意のフォルダの中にある、wp-contentの中にあるthemesのなかにフォルダごとアップロードします。＊アップロードする場所に気を付けてください。

アップロードが完了したらワードプレスにログインして左にあるメニューの外観のテーマをクリックします。すると先ほどscreenshot.jpgにした画像が出ていると思います。style.cssでテーマなどを変更された方は変更したテーマや作成者が出ていると思います。その画像をクリックして、保存して有効化するを押すとテーマがオリジナルのテーマに変更されます。

一番上の黒いバーにサイトのタイトルが出ていると思いますので、そちらにマウスを乗せるとサイトを表示を出てきますので、クリックしてサイトを確認してください。

次に行く前に共通の部分は部品化したいとおもいます。今回は練習ですのでhead部分のみ部品化したいと思います。

上記のワードプレス用に書き直したhome.phpの1～11行目を切り取って新しくhead.php（名前は任意）を作成し貼り付けます。

で次にhome.phpにincludeで読み込みますこんな感じです。

<?PHP 
	include "head.php";			
?>

<body>
<div id="wrap">
    <h1><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></h1>
    <div id="header">   
        <img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/header01.jpg" alt="ようこそ" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn03_off.jpg" alt="会社概要" /></a></li>
        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="news">
        	<h2>最新情報</h2>
        	<dl class="clearfix">
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            	<dt>2012年00月00日</dt>
                <dd><a href="newstopi.html">ワードプレス練習中</a></dd>
            </dl>
            <p class="t_r"><a href="newsall.html">一覧を見る>></a></p>
        </div>
        <!--▲news_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>">ホーム</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/">メニュー</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
<?PHP wp_footer();//footerの最適化?>
</body>
</html>

再度アップロードして確認してください。このように部品化（共通化）するのは簡単ですので、後々のことも考えて共通部分はならべく部品化しておきましょう。専門的に言うとobject指向というみたいですね。スクリプトなどのプログラミングの現場ではよく使われる言葉です。

これでトップページは一段落したのでメニューページと会社概要のページの作成に入ります。これらは固定ページになります。固定ページの作り方は複数ありpage.phpというレイアウトを書き込んだファイルを作って左のメニューにある固定ページをクリックし新規作成でエディターに書き込む方法と、カスタムテンプレートといわれる作り方があります。

今回はカスタムテンプレートの作り方で説明していきます。

ではmenu.htmlをワードプレス用に書き換えていきます。

まずはファイル名をmenu.phpに変更します。次に中身です。
こんな感じに変更します。＊メニュー1からメニュー6の部分は更新できるようにするので最後に記述します。

<?PHP 

/*
Template Name:menu
*/

?>

<?PHP 
	include "head.php";			
?>

<body>
<div id="wrap">
    <h1><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></h1>
    <div id="header">   
        <img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/header02.jpg" alt="メニュー" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn03_off.jpg" alt="会社概要" /></a></li>

        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="menu">
			<ul class="clearfix">
            	<li><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/menu1.jpg" alt="メニュー1" /><br />メニュー1</li>
            	<li><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/menu2.jpg" alt="メニュー2" /><br />メニュー2</li>
            	<li><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/menu3.jpg" alt="メニュー3" /><br />メニュー3</li>
            	<li><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/menu4.jpg" alt="メニュー4" /><br />メニュー4</li>
            	<li><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/menu5.jpg" alt="メニュー5" /><br />メニュー5</li>
            	<li><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/menu6.jpg" alt="メニュー6" /><br />メニュー6</li>
            </ul>
        </div>
        <!--▲menu_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>">ホーム</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/">メニュー</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
<?PHP wp_footer();//footerの最適化?>
</body>
</html>

基本は先ほどhome.phpと同じです。しかし今回はカスタムテンプレートですので１～５行が違うところです。カスタムテンプレートにするためにはテンプレートネームをつけなければなりません。ですので１～５行

<?PHP 

/*
Template Name:menu
*/

?>

を記述しています。これを簡単に説明すると、このページはmenuという名前のテンプレートですと書いてあります。

ではアップロードして確認してみます。

まずはmenu.phpをアップロードしてください。

次に左の固定ページをクリックし新規追加をクリックしますタイトルにページのタイトルを入力し（ここではメニューと入力）次に右側のページの属性の中にあるテンプレートでmenuを選択します。
最後にスラッグを変更します。パーマリンクの設定でページのタイトルがアドレスになる設定にしましたのでこのままだと/メニュー/になってしまいます。メニューページへのリンクは/menu/にしていますのでスラッグにmenuと入力して更新をクリックし完了です。スラッグが表示されていない方は右上の表示オプションをクリックしスラッグにチェックを入れると表示されます。

設定場所

次は会社概要のページです。

こちらはメニューページと全く同じやり方です。
注意点はテンプレートネームが重複しないよう気お付けてください。

<?PHP 

/*
Template Name:com

?>

メニューページと同じようにcom.phpに変更しソースをワードプレス用に書き直し、アップロードして固定ページで新規作成してテンプレートでcomを選びスラッグをcomにして完成です。

▲目次へ戻る

5.カスタム投稿を使って最新情報をお客さんが更新できるようにする

ここまででだいぶ形になってきまいた。次は最新情報をお客さんに更新してもらえるように、カスタム投稿を使って作成していきます。functions.phpにコードを書いてつくりますが、今回はもっと簡単にプラグインを使って作成していきます。
ワードプレスのすごいところは、知識があまりなくてもプラグインが充実しているので簡単にすごいホームページが作れると事だと思います。＊注意が必要ですがプラグインは便利でしかも簡単に設置できるためついついたくさん使ってしまいがちですが、 functions.phpに書いてできるところは並べく書いて作っていったほうがサイトも重くならずにすむのでいいかなと思います。

では作っていきます。今回使うプラグインはCustom Post Type UIです。このプラグインを使うとfunctions.phpに難しいことを書かなくても簡単にカスタム投稿を作ることができます。
＊カスタム投稿とは投稿を何個もオリジナルで増やせるようなものです。

ではまずプラグインをインストールします。左のメニューにあるプラグインをクリックし新規追加を押します。

検索ボックスにCustom Post Type UIを入れて検索してください。すると一覧で同じような名前のプラグインが出てくると思いますので、Custom Post Type UIの今すぐインストールをクリックします。

画面が切り替わりますので、今すぐ有効化をクリックして有効化します。有効化すると左のメニューの一番下にCustom Post Type のボタンが出現します。

マウスオーバーしてAddNewをクリックします。
すると下記のような画面が出ます。
カスタム投稿画像横幅を少し小さくしていますが、左半分の赤い点線の部分のみ使います。右半分はカスタムタクソノミーを設定する画面ですので、今回は使いません。

では記入します。

記入する箇所は4か所です。投稿タイプ名とラベルです。投稿タイプ名は英語で入れます。ここは設定するときなどに使用しますので必ず半角英語で入れてください。今回作るカスタム投稿は最新情報で使うのでnewsとします。ですので投稿タイプ名にnewsと入れてください。次にラベルです。ラベルに入れた文字が左メニューに表示されますので、ここでは最新情報と入力します。
次は少し分かりずらいですが、説明の入力ボックスのすぐ下にあるAdvanced Optionsをクリックするをメニューが出てきますので、Has Archiveと階層をTrueにします。
以上４か所を入力したら左下にあるSaveCustomPostTypeをクリックして保存して下さい。

これで準備は完成です。左のメニューに最新情報ができたことを確認してください。

では次は新しくファイルを作りたいと思います。カスタム投稿タイプで投稿された記事はsingle-投稿タイプ名.phpに出力される仕組みになっています。ですので今回はnewsというカスタム投稿を作ったので最新情報から投稿された記事はsingle-news.phpというファイルに出力されるということです。ですのでsingle-news.phpファイルを作成します。しかし最新情報で投稿した記事のレイアウトはすでにnewstopi.htmlで作成していますので、あとはファイル名を変えてワードプレス用にソースを書き換えるだけですね。

まずはnewstopi.htmlをsingle-news.phpに名前を変える。

ソースはこんな感じ

<?PHP 
	include "head.php";			
?>

<body>
<div id="wrap">
    <h1><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></h1>
    <div id="header">   
        <img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/header04.jpg" alt="最新情報" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn03_off.jpg" alt="会社概要" /></a></li>
        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="newsatopi">
            <div class="newsbox">
				<?PHP if(have_posts()):while(have_posts()):the_post();//ループあるもの全部出力?>
            	<div class="newstitle"><?PHP wp_title("");//記事・ページのタイトル出力?></div>
                <div class="newscont">
                <?PHP the_content();//記事の本文を出力?>
                </div>
                <?PHP endwhile;endif;//ループ終了?>
            </div>
            
        </div>
        <!--▲newsall_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>">ホーム</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/">メニュー</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
<?PHP wp_footer();//footerの最適化?>
</body>
</html>

基本は今までと同じです。今回は新しいタグを使いました。まずは２６行目です


<?PHP the_content();?>

これは記事の本文を出力するタグです。ですので今まで文章を入れていたところに入っています。

２３行目と２８行目はループというものであとで説明いたします。これで最新情報の個別ページは完成しました。

アップロードして確認する前にhome.phpの最新情報の部分を書き換えます。

こんな感じです。

<?PHP 
	include "head.php";			
?>

<body>
<div id="wrap">
    <h1><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></h1>
    <div id="header">   
        <img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/header01.jpg" alt="ようこそ" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn03_off.jpg" alt="会社概要" /></a></li>
        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="news">
        	<h2>最新情報</h2>
        	<dl class="clearfix">
				<?PHP query_posts("post_type=news&posts_per_page=5");//カスタム投稿のnewsのみを5件出力?>
                <?PHP if(have_posts()):while(have_posts()):the_post();//ループあるもの全部出力?>
            	<dt><?PHP echo get_the_date();//投稿日を出力?></dt>
                <dd><a href="<?PHP the_permalink();//記事の個別ページへのリンク?>"><?PHP the_title();//記事のタイトルを出力?></a></dd>
                <?PHP endwhile;endif;//ループ終了?>
            </dl>
            <p class="t_r"><a href="<?PHP echo home_url();?>/news/">一覧を見る>></a></p>
        </div>
        <!--▲news_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>">ホーム</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/">メニュー</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
<?PHP wp_footer();//footerの最適化?>
</body>
</html>

では新しくでできたものを説明していきます。２１行目から３１行目のnewsの部分だけ変更しています。
まずは２６行目から

<?PHP echo get_the_date();?>

こちらは投稿された日を出力します。表示形式は設定の中の一般の日付のフォーマットで変更できます。

次は２７行目です

<?PHP the_permalink();?>

こちらは記事の個別ページへのリンクです。該当する記事にリンクを動的に張ってくれます。

次は２５行目と２８行目です。先ほどもでてきましたがこれは２つでワンセットです。

<?PHP if(have_posts()):while(have_posts()):the_post();//ループスタート?>

<?PHP endwhile;endif;//ループ終了?>

上記はループと呼ばれるもので上記２つに囲まれているものはすべて出力するという意味です。仮に最新情報が１００件投稿されていたら

           	<dt><?PHP echo get_the_date();//投稿日を出力?></dt>
                <dd><a href="<?PHP the_permalink();//記事の個別ページへのリンク?>"><?PHP the_title();//記事のタイトルを出力?></a></dd>

が１００個出力されることになります。

しかしこれでは不完全です。今回は最新情報の記事を５件のみ出力したいので、それを指示しているのが２４行目です。

<?PHP query_posts("post_type=news&posts_per_page=5");?>

こちらを日本語で説明するとpost_type=news（投稿タイプがnewsを）posts_per_page=5（５件）という意味です。ですので件数を増やしたり減らしたりする場合は５の部分を変更し、ほかにもカスタム投稿を作った場合はnewsの部分に出力したい投稿タイプを記述すればOKです。

先ほどのループと合わせて日本語で説明すると「投稿タイプがnewsの記事を５件、ループ内にあるものを出力します。」のような感じです。

あとは３０行目です。

<?PHP echo home_url();?>/news/

一覧を見るのところに上記リンクを張っています。カスタム投稿の個別ページはsingle-カスタム投稿名.phpに出力されると前述しましたがカスタム投稿の一覧ページはarchive-カスタム投稿名.phpに出力されます。そして一覧へのリンクはカスタム投稿名になります。ですのでここではカスタム投稿名のnewsにリンクを張っています。

では最後に一覧ページを作ります。一覧ページはarchive-カスタム投稿名.phpに出力されるのでarchive-news.phpを作成します。しかしここでも一覧のページはnewsall.htmlで作成しているので簡単です。

まずはファイル名を変更します。newsall.htmlをarchive-news.phpに変更します。次はソースです。

こんな感じ

<?PHP 
	include "head.php";			
?>

<body>
<div id="wrap">
    <h1><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></h1>
    <div id="header">   
        <img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/header04.jpg" alt="最新情報" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn03_off.jpg" alt="会社概要" /></a></li>
        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="newsall">
        
        
			<?PHP query_posts("post_type=news&posts_per_page=5");//カスタム投稿のnewsのみを５件出力?>
            <?PHP if(have_posts()):while(have_posts()):the_post();?>
            <div class="newsbox">
            	<div class="newstitle"><a href="<?PHP the_permalink();//記事の個別ページへリンク?>"><?PHP the_title();//記事のタイトルを出力?></a></div>
                <p class="newscont"><?PHP the_excerpt();//抜粋を表示?></p>
                <p class="t_r"><a href="<?PHP the_permalink();//記事の個別ページへリンク?>">もっと見る>></a></p>
            </div>
        	<!--▲newsbox▲-->
			<?PHP endwhile;endif;?>
            
            
        </div>
        <!--▲newsall_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>">ホーム</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/">メニュー</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
<?PHP wp_footer();//footerの最適化?>
</body>
</html>

ここも先ほどと同じようにループで囲っています。

今回の新しいものは２８行目です

<?PHP the_excerpt();?>

こちらは抜粋を表示してくれます。functions.phpに少しだけ設定を書きカスタマイズしたいと思います。

<?PHP
function my_excerpt_mblength($length){
	
	return 100;//ここで文字数制限
	
}
add_filter("excerpt_mblength","my_excerpt_mblength");

//抜粋の省略記号
function my_excerpt_more($more){
	
	return"・・・";//ここで変更
}
add_filter("excerpt_more","my_excerpt_more");


?>

上記をfunctions.phpに記述すればOKです。

では最後に確認します。アップロードをして、左メニューの最新情報から記事を６件投稿し５件のみ出力されるか確認してください。

最新情報が新しい順から５件表示されていると完成しています。本当は古い記事もページャーなどを使って表示させるべきですが、今回は割愛させていただきます。SEO的にもページは多いほうが良いとさせているようですので、本番はつけたほうがいいでしょう。

▲目次へ戻る

6.カスタムフィールドテンプレートを使てメニュー画像をお客さんが更新できるようにする

大変長くなりましたがこれが最後の項目です。メニューページの６つの画像をお客さんに自由に変更してもらえるように作成します。

こちらもプラグインを使いたいと思います。ここで使うプラグインはCustom Field Templateです。
先ほどと同じように左のメニューのプラグインから新規追加をクリックし検索ボックスにCustom Field Templateと入力します。一覧が出てくるのでCustom Field Templateの下の今すぐインストールをクリックし、画面が切り替わりますので今すぐ有効化をクリックして有効化してください。

すると設定の中にカスタムフィールドテンプレートというメニューが出てきます。
クリックして下記のように入力します。

入力画面
テンプレートコンテンツの中には下記のように記述しています。


[メニュー①画像選択]

type = file

label=横幅180px縦180px


[メニュー①コピー]

type = text
size=80

[メニュー②画像選択]

type = file

label=横幅180px縦180px


[メニュー②コピー]

type = text
size=80

[メニュー③画像選択]

type = file

label=横幅180px縦180px


[メニュー③コピー]

type = text
size=80

[メニュー④画像選択]

type = file

label=横幅180px縦180px


[メニュー④コピー]

type = text
size=80

[メニュー⑤画像選択]

type = file

label=横幅180px縦180px


[メニュー⑤コピー]

type = text
size=80


[メニュー⑥画像選択]

type = file

label=横幅180px縦180px


[メニュー⑥コピー]

type = text
size=80

記述の詳しい説明は過去記事に書いていますので参照してください。

こちら

記入後オプションを更新を押してください。

すると固定ページのメニューのページを編集するときだけテンプレートがカスタムフィールドテンプレートが出てきます。

こんな感じです

設定後

これで入力変更は簡単になりました。あとはmenu.phpにカスタムフィールドテンプレートで入力したものが表示させるようにします。

こんな感じです。

<?PHP 

/*
Template Name:menu
*/

?>

<?PHP 
	include "head.php";			
?>

<body>
<div id="wrap">
    <h1><?PHP bloginfo("name");//ブログのタイトルを出力?><?PHP wp_title("");//記事・ページのタイトル出力?></h1>
    <div id="header">   
        <img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/header02.jpg" alt="メニュー" />
    </div>
    <!--▲header_end▲-->
	<div id="navi">
    	<ul class="clearfix">
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn01_off.jpg" alt="ホーム" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn02_off.jpg" alt="メニュー" /></a></li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/"><img src="<?PHP bloginfo("template_url");//テーマフォルダのURL?>/img/btn03_off.jpg" alt="会社概要" /></a></li>
        </ul>
    </div>
    <!--▲navi_end▲-->
    <div id="cont">
    	<div id="menu">
			<?PHP $image1 = wp_get_attachment_image_src( get_post_meta($post->ID, 'メニュー①画像選択', true),'full' );?>
            <?PHP $image2 = wp_get_attachment_image_src( get_post_meta($post->ID, 'メニュー②画像選択', true),'full' );?>
            <?PHP $image3 = wp_get_attachment_image_src( get_post_meta($post->ID, 'メニュー③画像選択', true),'full' );?>
            <?PHP $image4 = wp_get_attachment_image_src( get_post_meta($post->ID, 'メニュー④画像選択', true),'full' );?>
            <?PHP $image5 = wp_get_attachment_image_src( get_post_meta($post->ID, 'メニュー⑤画像選択', true),'full' );?>
            <?PHP $image6 = wp_get_attachment_image_src( get_post_meta($post->ID, 'メニュー⑥画像選択', true),'full' );?>
			<ul class="clearfix">
            	<li><img src="<?PHP echo $image1 [0]; ?>" alt="<?PHP echo get_post_meta($post->ID,"メニュー①コピー",true);?>" /><br /><?PHP echo get_post_meta($post->ID,"メニュー①コピー",true);?></li>
            	<li><img src="<?PHP echo $image2 [0]; ?>" alt="<?PHP echo get_post_meta($post->ID,"メニュー②コピー",true);?>" /><br /><?PHP echo get_post_meta($post->ID,"メニュー②コピー",true);?></li>
            	<li><img src="<?PHP echo $image3 [0]; ?>" alt="<?PHP echo get_post_meta($post->ID,"メニュー③コピー",true);?>" /><br /><?PHP echo get_post_meta($post->ID,"メニュー③コピー",true);?></li>
            	<li><img src="<?PHP echo $image4 [0]; ?>" alt="<?PHP echo get_post_meta($post->ID,"メニュー④コピー",true);?>" /><br /><?PHP echo get_post_meta($post->ID,"メニュー④コピー",true);?></li>
            	<li><img src="<?PHP echo $image5 [0]; ?>" alt="<?PHP echo get_post_meta($post->ID,"メニュー⑤コピー",true);?>" /><br /><?PHP echo get_post_meta($post->ID,"メニュー⑤コピー",true);?></li>
            	<li><img src="<?PHP echo $image6 [0]; ?>" alt="<?PHP echo get_post_meta($post->ID,"メニュー⑥コピー",true);?>" /><br /><?PHP echo get_post_meta($post->ID,"メニュー⑥コピー",true);?></li>
            </ul>
        </div>
        <!--▲menu_end▲-->
    </div>
    <!--▲cont_end▲-->
    <div id="footer">
    	<ul>
        	<li><a href="<?PHP echo home_url();//トップページへのリンク?>">ホーム</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/menu/">メニュー</a>|</li>
            <li><a href="<?PHP echo home_url();//トップページへのリンク?>/com/">会社概要</a></li>
        </ul>
    </div>
    <a href="http://www.mariodesign.net/wpsite/"><<教えてマリオに戻る</a>
</div>
<!--▲wrap_end▲-->
<?PHP wp_footer();//footerの最適化?>
</body>
</html>

最後に説明したいと思います。カスタムフィールドテンプレートを出力する場合は

<?PHP echo get_post_meta($post->ID,"ここにテンプレートコンテンツの中に記入した[ ]で囲った任意の名前",true);?>

で出力されます。

画像の場合のみ少し特殊で一度変数に入れて出力しなければなりません。

<?PHP $任意の名前 = wp_get_attachment_image_src( get_post_meta($post->ID, ‘ここにテンプレートコンテンツの中に記入した[ ]で囲った画像の任意の名前’, true),’full’ ); ?>

次にIMGのsrc=に上記変数をechoで出力させればOKです。

<img src="<?PHP echo $任意の名前 [0]; ?>" />

です。

以上で完成です。最後にアップロードして、固定ページのメニューページでカスタムフィールドテンプレートから画像と画像の説明文を入れたら完成です。

しかしまだまだ使いやすっくしないとお客さんには納品できないと思いますので、いろいろと技術を駆使してより使いやすいものを作成していただければと思います。

以上ですべての投稿を終わります、長々とお読みいただきありがとうございます。

完成ソースダウンロードはこちら

▲目次へ戻る

コメント欄

サンゴの尻尾

先日、ワードプレスカンファレンスに参加してきて、「ワードプレス」は難しい！！！と思ってましたが、こちらのサイトが分かりやすくなるほど・・・なるほどと時のたつままに読み込んでしまいました。感謝感謝です。
フォームの作り方もこちらで勉強させていただきました。
ありがとうございます。

2012年10月20日5:04 AM

Mrアルバイト

サンゴの尻尾様

読んでいただきありがとうございます。

今後もよろしくお願いいたします。

2012年10月20日7:14 AM

黒崎

Php4で作成した自宅マンションのホームページ。だいぶ時がたって古臭くなってWordPressで再構築するにはを探してました。検索しても最初の取っ掛かりの解説があまりないようです。MySQLで構築したデータベースをWordpressでどう活用して行けるのか勉強中です。多謝です。ありがとうございました。

2013年2月16日9:58 AM

Mrアルバイト

黒崎様

ご覧いただきありがとうございます。

今後ともよろしくお願いいたします。

2013年2月20日4:10 PM

naomi

WordPressではじめ制作するにあたり、最初のやり方をようやく知れました！とても勉強になりました

載っている通りに作業してみたのですが、最後の最後で、一覧ページがリンク（表示）されませんでした。
ページは開きますが、真っ白・・・・・。
何度もコピペしてやり直しましたが、ダメでした；
どうしたらよいのでしょうか？

2013年7月9日6:19 PM

Mrアルバイト

naomi様

コメントありがとうございます。この読みにくいブログを見ていただきありがとうございます。

一覧ページが表示されないとのことですが最新一覧でよろしいでしょうか？

真っ白になる場合の原因で考えられるのは

①一覧ページ用の（アーカイブ）のページがない。
一覧ページはarchive-投稿タイプ名.phpで生成されます。
例）投稿タイプがnewsの場合は
archive-news.phpを作成されているか確認お願いいたします。

またnewsの部分が作られている投稿タイプ名と一致しているか確認してみてください。

②プラグインCustom Post Type UIのオプションの設定

Advanced Optionsをクリックするをメニューが出てきますので、Has Archiveと階層の2点がTrueになっているか確認お願いいたします。

以上2点のご確認お願いいたします。

2013年7月9日6:52 PM

naomi

ありがとうございます！
確認したところ、②プラグインCustom Post Type UIのオプションの設定ができていませんでした。
初歩的ミスでした。すいません。

・・・なれるまで難しそうですね；
でもなんとなく流れ（？）は解りました。

HTMLやCSSも完璧ではないので、他のところも読ませていただきます！

2013年7月10日1:29 PM

Mrアルバイト

naomi様

今後ともよろしくお願いいたします。

2013年7月10日5:07 PM

さんごの尻尾

何度も読み返しながら格闘しております。
疑問が浮かびまして記させていただきました。
と
の
違いなのですが、同じ意味ではないのでしょうか。
いまいち不明です。
うーーーーーむ
よろしくお願いいたいます。

2013年8月19日2:31 AM

さんごの尻尾

コード表記できないようなので
再記入いたします。

echo home_url()と
bloginfo(“template_url”)

です。

2013年8月19日2:34 AM

Mrアルバイト

サンゴの尻尾様

いつもありがとうございます。

質問の件ですが

echo home_url()はトップページへのＵＲＬを出力します。
マリオデザインのサイトを例にすると
　http://www.mariodesign.net
が出力されます。

bloginfo(“template_url”)はテーマフォルダのＵＲＬを出力します。
マリオデザインのサイトを例にすると
　http://www.mariodesign.net/wp-content/themes/wpmariodesign/
が出力されます。

一般的に
echo home_url()はリンクのを張る場合に使用し
bloginfo(“template_url”)は画像の読み込み時に使用します。

ご確認よろしくお願いいたします。

2013年8月19日7:47 AM

さんごの尻尾

早速ありがとうございます。
よーく理解できました。
初心者にはなるほど、なるほどと
感心させられてばかりです。

2013年8月19日3:11 PM

ワードプレス最適なパーマリンクは？

[…] ワードプレス（wordpress）でオリジナルサイト作成 […]

2013年7月2日6:22 AM

コメントを残すコメントをキャンセル

TRACKBACK_URL

カテゴリー
- CSS
- html
- javascript
- photoshop
- php
- seo
- technique
- wordpress
- スマートフォン
- 会社
アーカイブ
最近の投稿
人気記事？？ランキング

ワードプレス（wordpress）でオリジナルサイト作成「教えてマリオ」

ホーム>>教えてマリオトップ>>ワードプレス（wordpress）でオリジナルサイト作成

ワードプレス（wordpress）でオリジナルサイト作成

1.ホームページを作る

2.ワードプレスをサーバーにインストール

3.ワードプレスの初期値の設定

4.HTMLで作ったサイトをワードプレス用に書き直す

5.カスタム投稿を使って最新情報をお客さんが更新できるようにする

6.カスタムフィールドテンプレートを使てメニュー画像をお客さんが更新できるようにする

コメント欄

コメントを残す コメントをキャンセル

カテゴリー

アーカイブ

最近の投稿

人気記事？？ランキング

コメントを残すコメントをキャンセル