レンタルサーバへアップロードするまでは、貴方のPCがサーバーです。既にサーバー環境は出来ています。これから、CMS(wordpress)を使ってページを作成しますが、具体例がないと説明しにくいので、とりあえず本サイトを参考に進めてまいります。当サイトもかなり変更しましたので修正します

目次

サイトの設計
サイトを作成するにあたって、画面のレイアウトを決めますが、今回はTwenty Twelveを使います。
「モバイルファースト」の考えのもとに、Twenty Twelve はいろんなサイズの画面やデバイスで表示されることを前提にしています。600px未満の記述を基本にしたうえで、メディアクエリーで600px以上960px未満、 960px以上の記述をしています。

style.cssの1417行目当たりに(私がデフォルトの状態で確認した時)、「/* =Media queries」という記述があり、その下からメディアクエリを使ってタブレット用の指定とPC用の指定が上書きされるようになっています。TwentyTwelveのスタイルシート(style.css)では、/* =Media queriesより上に書いた記述はスマートフォン、タブレット、PC全てに指定が反映されます。

Twenty Twelve のワイヤーフレーム「レイアウト」600px以上
960px,600px以上は同じフレームにしました。
記事は、float: left;にしてwidth: 80%;に
ウイジェッドはfloat: right;にしてwidth: 18%;
にしました。

.site-content {
float: left;
width: 80%;
}
.widget-area {
float: right;
width: 18%;
}
Twenty Twelve のワイヤーフレーム「レイアウト」600px未満
記事は
float: left;
width: 100%%;
ウイジェッドは
float: left;
width: 100%;

.site-content {
float: left;
width: 100%;
}
.widget-area {
float: left;
width: 80%;
}
サイトの構成
「HOME」「開発環境」「WEB開発メモ」「WORDPRESS」「サイト作成」「サーバー」「お知らせ」と「お問い合わせ」の入った、サイトの構成を説明します。

本サイトは、メニュが8個あります。「HOME」「開発環境」「WEB開発メモ」「WORDPRESS」「サイト作成」「サーバー」「お知らせ」と「お問い合わせ」です。
Twentytwelveは元々「ブログ」のテーマであり、投稿すると、Comment、タイトル、投稿日時とかがデフォルトで表示されます。今回のサイトでは、Comment、タイトル、投稿日時は不要、またページ毎に固有のサイドバーを設けたいので、この様な構成にしました。
Noimage

子テーマの作成
Twentytwelveを親テーマにして、機能やデザインを拡張・修正出来る子テーマを使います。名前をTwentytwelvechiledとし、その中にstyle.cssを作って下さい。内容は下記参照下さい。style.css以外のファイルは順次追加します。

Twentytwelveの子テーマTwentytwelvechildを作成します。

子テーマのフォルダー(Twentytwelvechild)をthemaディレクトリに作成します。下図の通りTwentytwelveとTwentytwelvechildを配置します。
Twentytwelvechildの中にstyle.cssを作り、内容を下記の通り作成して下さい。

        /*
        Theme Name:Twenty Twelve Child
        Description:Twenty Twelve を利用した子テーマです。
        Template:twentytwelve
        Version:1.0
        Author:Mighty Works
        Author URI:http://mighty-works.com/
        */
        @import url("../twentytwelve/style.css");
        

Twentytwelvechildの中にfunction.phpを作り、内容を

        <?php

        ?>
        

にして下さい。

index.php、sidebar.php、single.php、header.php、archive.php、content.php、page.phpはTwentytwelveのファイルをコピーして入れておくといいでしょう。wordpressadminツールで「外観」→「テーマ」を 「Twenty Twelve Child」にして下さい。
親テーマと子テーマ、style.css
Noimage

最初の画面は下図のようになります。

Noimage

サイトの作成
1.twentytwelvechildディレクトリー内に、固定ページのphpを作成します。
2.「メニュー」を設定します。
3.twentytwelvechild/inc内に、カスタムタクソノミー用phpを作成します。
4.各ページ毎のサイドバーを作成します。
5.子テーマのstyle.cssを修正します。
開発を進めて行くと、以下のファイル構成になります。
Noimage

「固定ページ」を作ります。
「HOME」「開発環境」「開発ツール」「開発」「サーバー」「お知らせ」「ブログ」「お問い合わせ」の8個です。
Twentytwelveの「page.php」を元に
「home.php」
「page1.php」
「page2.php」
「page3.php」
「page4.php」
「page5.php」
「BlogPag.php」
「unnei.php」
「contact.php」
を作成します。
home.phpの作成
Twentytwelveにはhome.phpがありませんので、下記のようにhome.phpの作成しました。
<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>
	<div id="primary" class="site-content">
		<div id="content" role="main">
			<?php //'hometop_news1'というカスタム投稿タイプ呼び出し
			$args = array(
			  'tax_query' => array(
				array(
				  'taxonomy' => 'hometop_category1',
				  'field' => 'slug',
				  'terms' => array( 'top' )
				)
			  ),
			  'post_type' => 'hometop_news1',
			  'posts_per_page' => 10,
			  'paged' => $paged
			);
			$wp_query = new WP_Query( $args );?>
			<?php if (have_posts()) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
				<?php the_content(); ?>
			<?php endwhile;endif; ?>
		</div><!-- #content -->
	</div><!-- #primary -->

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
<?php get_sidebar(); ?>
<?php get_sidebar('広告2'); ?>
<div class="clearfix"></div>
</div><!-- #secondary -->
<?php endif; ?>
<?php get_footer(); ?>

    
$wp_query = new WP_Query( array( ‘post_type’ => ‘hometop_news1′, ‘posts_per_page’ =>10, ‘paged’ => $paged ) ); ?>で taxonomyが hometop_category1の スラッグがtop をSELECTしています。
Twentytwelveの「page.php」を元に、page1.php~page5.php の作成
第3章「開発」のpage3.phpを例にご説明します。「Template Name: SubPage3」が9行めにあります。これで「固定ページを編集」画面で、「テンプレート」ドロップダウン リストに「SubPage3」が追加されます。第1章~第5章まで同じ構造です。

Noimage

page3.phpの内容(基本的にhome.phpと同じです)
page.phpは、普通1つあればいいのですが、今回はページ毎にサイドバー、ヘッダーを変更することを考慮し、各ページ毎に作成しました。
<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 * Template Name: SubPage3
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>
	<div id="primary" class="site-content article">
		<div id="content" role="main">
			<?php //'第3章top_news1'というカスタム投稿タイプ呼び出し
			$args = array(
			  'tax_query' => array(
				array(
				  'taxonomy' => 'sansyoutop_category1',
				  'field' => 'slug',
				  'terms' => array( 'top' )
				)
			  ),
			  'post_type' => 'sansyoutop_news1',
			  'posts_per_page' => 10,
			  'paged' => $paged
			);
			$wp_query = new WP_Query( $args );?>



				<?php if (have_posts()) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
				<h1 class="entry-title"><?php the_title(); ?></h1>
				<?php the_content(); ?>
			<?php endwhile;endif; ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
<?php get_sidebar(); ?>
<?php get_sidebar('3章'); ?>
<div class="clearfix"></div>
<?php get_sidebar('広告2'); ?>
</div><!-- #secondary -->
<?php endif; ?>
<?php get_footer(); ?>
    
$wp_query = new WP_Query( array( ‘post_type’ => ‘sansyoutop_news1′, ‘posts_per_page’ =>10, ‘paged’ => $paged ) ); ?>で taxonomyが sansyoutop_category1の スラッグがtop をSELECTしています。
「メニュー」を設定します。
固定ページの「HOME」第1章「開発環境」第2章「開発ツール」第3章「開発」第4章「サイトの作成」第5章「サーバー」「お知らせ」「お問い合わせ」をメニュー1に追加します。

Noimage

固定ページの「お知らせ」「ブログ」「お問い合わせ」をメニュー2に追加します。このメニューはサイドバーに表示させます。将来メインメニューが増えた場合には、「お知らせ」「お問い合わせ」をメインメニューから削除します。

Noimage

「メニュー1」(メインメニュー)の外観を設定します。
backgroundに画像を使用しました。/*text-shadow:0 -1px 0px #333,0 1px 0px #555;*/はやめました。widthは100/8の12.49%をいれています。
/****************************************
ナビゲーションの変更
*****************************************/
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    }
    .main-navigation li a,
    .main-navigation li {
    width:12.49%;
    background: url(http://nak-kobe.lolipop.jp/images/hp-2/タイル.jpg);
    float:left;
    padding:0;
    margin:0;
    text-align:center;
    font-family: "メイリオ", "MS Pゴシック", sans-serif;
    }
    .main-navigation li a {
    position:relative;
    width:100%;
    color:#000;
    font-size:11px;
    font-weight:bold;
    /*text-shadow:0 -1px 0px #333,0 1px 0px #555;*/
    padding:5px 0;
    text-decoration:none;
    display:block;
    }
Noimage

プロのための Linuxシステム構築・運用技術 (Software Design plus)

新品価格
¥3,110から
(2014/9/21 00:31時点)

Noimage

Noimage

Linux Mint 17 Cinnamon review

Noimage

Noimage

The Linux Mint Beginner’s Guide (Computer Beginner’s Guides)

Noimage


Noimage

Noimage

タクソノミー
タクソノミーは名前がなんか取っ付きにくく私も理解しにくかったので、ご理解頂く上でご参考になればと思います。
13個のカスタム投稿タイプを宣言します。
カスタム投稿はこちらを参考にさせて頂きました。WPータクソノミー
http://www.yusk.org/memo/wp/custom-post-type_custom-taxonomy.html 有難うございます。
// カスタム投稿タイプを読み込む
include_once(dirname(__FILE__) . “/inc/custom-post-type-home.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type-osirase.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type-blog.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type1.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type2.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type3.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type4.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type5.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type11.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type21.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type31.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type41.php”);
include_once(dirname(__FILE__) . “/inc/custom-post-type51.php”);
これら13個のファイルの基本構造は同じです、そのうちの1つ「/inc/custom-post-type-home.php」は以下の通りです。
<?php
/* function.php */
//フックされたアクション
function custom_post_type_hometop1() {
    $labels = array(
        'name' => _x('ホームトップ','post type general name'),
        'singular_name' => _x('ホームトップ', 'post type singular name'),
        'add_new' => _x('新規ホームトップ', 'book'),
        'add_new_item' => __('新しいホームトップを追加'),
        'edit_item' => __('ホームトップを編集'),
        'new_item' => __('新しいホームトップ'),
        'view_item' => __('ホームトップを編集'),
        'search_items' => __('ホームトップを探す'),
        'not_found' =>  __('ホームトップありません'),
        'not_found_in_trash' => __('ゴミ箱にホームトップはありません'),
        'parent_item_colon' => ''
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'show_ui' => true,
        'query_var' => true,
        'hierarchical' => false,
        'menu_position' => 2,
        'supports' => array('title','editor','author','thumbnail','excerpt'
            ,'comments','custom-fields','page-attributes'),
    );
    //カスタム投稿タイプを登録
    register_post_type('hometop_news1', $args);
    
    //カテゴリータイプ
    $args = array(
        'label' => 'ホームカテゴリー',
        'public' => true,
        'show_ui' => true,
        'hierarchical' => true
    );
    register_taxonomy('hometop_category1','hometop_news1',$args);   

    //タグタイプ
    $args = array(
        'label' => 'タグ',
        'public' => true,
        'show_ui' => true,
        'hierarchical' => false
    );
    register_taxonomy('hometop_tag1','hometop_news1',$args);    
}
//アクションをフック function custom_post_type_hometop() を呼び出す
add_action('init', 'custom_post_type_hometop1');
?>
13個のカスタム投稿タイプが追加されています。
今回は「HOME」「開発環境」「開発ツール」「開発」「サイト作成」「サーバー」「お知らせ」「ブログ」で独立した分類で記事を書きたいので、カスタム投稿タイプを使います。

Noimage

13個カスタム投稿タイプの内、「ホームトップ」に投稿した記事は、PHPMyadminで見てみると(下図)、wp3_posts テーブルの中に、カラム名のpost_type列に、 hometop_news1 があります。この行の post_content列に投稿記事があります。投稿記事Typeは longtext です。

「homepage.php」の
$wp_query = new WP_Query( array( ‘post_type’ => ‘hometop_news1′, ‘posts_per_page’ =>20, ‘paged’ => $paged ) ); ?>で、
post_type列をhometop_news1をキーにして行を見つけ、その行のコンテンツを表示します。

Noimage

SELECT * FROM `wp3_posts` WHERE `post_type` = ‘hometop_news1’ LIMIT 0 , 20 の結果です。
該当する行のみ表示されています。post_content の内容は頭の1、2行しか表示されていません。
Noimage

コンソールで
mysql> SELECT post_content FROM `wp3_posts` WHERE `post_type` = ‘hometop_news1′ LIMIT 0 , 20 と入力すると。以下のような内容がコンソールに出力されます。
まさにこれは、ページの内容ですね!

Noimage

コンソール出力の内容は、もっと長いのですが、省略した内容は以下のようになります。
<div class="site-content-middle">
<h1><span style="font-size: 14px;">
貴方のPCに一切手を加えることなく USB-HDDに linuxをインストールする。
「Windowsを回復可能」な準備をして、Windowsと同じHDDにlinuxをインストールする。(慎重に)
</span></h1>
</div>

<blockquote>ホームページを作るには、色々な方法がありますが、これからご紹介するのは、CMS(wordpress)を使って、お知らせ、ブログ、問い合わせの入ったページです。開発環境は、OSとしてLinux(LinuxMint17)を使います。</blockquote>
<div class="site-content-middle">このページの目的は、貴方のPCに一切手を加えることなくLINUXでのサイト開発環境をインストールすることです。私は何度もWindowsを再起動出来ず困ったことがあります。あなたがコンピュータサイエンス方面に進むつもりなら、いずれ嫌でもUNIX、LINUXに習熟しなければなりません。是非チャレンジして下さい。</div>
これから行う作業は時間が掛かりますが腰を据えてしっかりと丁寧に行ってください。ページを移動せずに読み進められるよう、記事はあえて重複させます。
<div class="site-content-middle">第1章「開発環境」:Linuxのインストール等開発環境をまず整えます。
第2章「開発ツール」:開発で使うツールを整えます。(作成中)
第3章「開発」:ワードプレスを使ってページを作成します。(作成中)
第4章「サーバー」:サイトの運営を行います。(準備中)
「お知らせ」
「ブログ」
「お問い合わせ」</div>
<h1 align="center">目次</h1>
<div class="clearfix"></div>

<div class="site-content-middle-mokuji">
<table>
 <tr>
  <th><h2>第1章「開発環境」:Linuxのインストール等開発環境をまず整えます。</h2></th>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec1">LinuxMint17をUSB HDDへインストール</a></h4></table></td>
 </tr>
 <tr>
  <td style="text-indent:1em"><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/issyou_category1/buitinhdd/">LinuxMint17をWindowsと同じHDDにインストール(参考)</a></h4></table></td>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec2">LinuxMint17で日本語入力</a></h4></table></td>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec3">Mint17で日本語入力の設定</a></h4></table></td>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec4">Apacheをインストール</a></h4></table></td>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec6">Apache2.confの設定</a></h4></table></td>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec7">所有者とグループの設定</a></h4></table></td>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec8">Mysqlのインストール</a></h4></table></td>
 </tr>
 <tr>
  <td><table border=1><h4><a href="http://nak-kobe.lolipop.jp/hp-2/第1章/#sec9">phpmyadminのインストール</a></h4></table></td>
 </tr>
</table>