wordpress 自作のテーマを作る 2014/09/ その5

functions.php


<?php
// ウィジェットエリア
// サイドバーのウィジェット
register_sidebar( array(
'name' => __( 'Side Widget' ),
'id' => 'side-widget',
'before_widget' => '<li class="widget-container">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );

// フッターエリアのウィジェット
register_sidebar( array(
'name' => __( 'Footer Widget' ),
'id' => 'footer-widget',
'before_widget' => '<div class="widget-area"><ul><li class="widget-container">',
'after_widget' => '</li></ul></div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );

// アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(220, 165, true ); // 幅 220px、高さ 165px、切り抜きモード


// カスタムナビゲーションメニュー
add_theme_support('menus');

/* ------------チェック---------------- */
/* ★ ---------必須ではないがやっておくとよい---------★ */

//<head>内のWordPressのバージョンを消す
remove_action('wp_head','wp_generator');

/*-- カスタム投稿ページ--------------------------------------------------------------------------*/
/* menu_position5は「投稿」の下、10は「メディア」の下、20は「固定ページ」の下です。
/*--------------カスタムメニュー--------------*/

/* ★infoここらから★ */
$labels = array(
'name' => _x( 'お知らせ', 'info' ),
'singular_name' => _x( 'お知らせ', 'info' ),
'add_new' => _x( '新規作成', 'info' ),
'add_new_item' => _x( '新しく追加 - お知らせ', 'info' ),
'edit_item' => _x( '編集 - お知らせ', 'info' ),
'new_item' => _x( '新規追加 - お知らせ', 'info' ),
'view_item' => _x( '表示 - お知らせ', 'info' ),
'search_items' => _x( '検索 - お知らせ', 'info' ),
'not_found' => _x( 'ページが見つかりません', 'info' ),
'not_found_in_trash' => _x( 'ゴミ箱にはありません', 'info' ),
'parent_item_colon' => _x( '新しいお知らせ:', 'info' ),
'menu_name' => _x( 'お知らせ', 'info' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'supports' => array( 'title', 'editor' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 10,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type('info', $args );

/* カスタムタクソノミーを定義 */
register_taxonomy(
'info_cat',
'info',
array(
'label' => 'カテゴリー',
'hierarchical' => true,
'rewrite' => array('slug' => 'info')
)
);
/* カスタムタクソノミーを定義ここまで */

/* 管理画面一覧にカテゴリを表示 */
function manage_info_columns($columns) {
$columns['info_category'] = "カテゴリー";
return $columns;
}
function add_info_column($column_name, $post_id){
if( $column_name == 'info_category' ) {
//カテゴリー名取得
if( 'info_category' == $column_name ) {
$info_category = get_the_term_list($post_id, 'info_cat', '', ', ', '' );
}
//該当カテゴリーがない場合「なし」を表示
if ( isset($info_category) && $info_category ) {
echo $info_category;
} else {
echo __('None');
}
}
}
add_filter('manage_edit-info_columns', 'manage_info_columns');
add_action('manage_posts_custom_column', 'add_info_column', 10, 2);
/* 管理画面一覧にカテゴリを表示ここまで */

/* ★infoここまで★ */
/* ★menuここらから★ */
$labels = array(
'name' => _x( 'メニュー', 'menu' ),
'singular_name' => _x( 'メニュー', 'menu' ),
'add_new' => _x( '新規作成', 'menu' ),
'add_new_item' => _x( '新しく追加 - メニュー', 'menu' ),
'edit_item' => _x( '編集 - メニュー', 'menu' ),
'new_item' => _x( '新規追加 - メニュー', 'menu' ),
'view_item' => _x( '表示 - メニュー', 'menu' ),
'search_items' => _x( '検索 - メニュー', 'menu' ),
'not_found' => _x( 'ページが見つかりません', 'menu' ),
'not_found_in_trash' => _x( 'ゴミ箱にはありません', 'menu' ),
'parent_item_colon' => _x( '新しいメニュー:', 'menu' ),
'menu_name' => _x( 'メニュー', 'menu' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'supports' => array( 'title', 'editor' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 10,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type('menu', $args );

/* カスタムタクソノミーを定義 */
register_taxonomy(
'menu_cat',
'menu',
array(
'label' => 'カテゴリー',
'hierarchical' => true,
'rewrite' => array('slug' => 'menu')
)
);
/* カスタムタクソノミーを定義ここまで */

/* 管理画面一覧にカテゴリを表示 */
function manage_menu_columns($columns) {
$columns['menu_category'] = "カテゴリー";
return $columns;
}
function add_menu_column($column_name, $post_id){
if( $column_name == 'menu_category' ) {
//カテゴリー名取得
if( 'menu_category' == $column_name ) {
$menu_category = get_the_term_list($post_id, 'menu_cat', '', ', ', '' );
}
//該当カテゴリーがない場合「なし」を表示
if ( isset($menu_category) && $menu_category ) {
echo $menu_category;
} else {
echo __('None');
}
}
}
add_filter('manage_edit-menu_columns', 'manage_menu_columns');
add_action('manage_posts_custom_column', 'add_menu_column', 10, 2);
/* 管理画面一覧にカテゴリを表示ここまで */

/* ★menuここまで★ */
/* ★specialここらから★ */
$labels = array(
'name' => _x( 'スペシャル', 'special' ),
'singular_name' => _x( 'スペシャル', 'special' ),
'add_new' => _x( '新規作成', 'special' ),
'add_new_item' => _x( '新しく追加 - スペシャル', 'special' ),
'edit_item' => _x( '編集 - スペシャル', 'special' ),
'new_item' => _x( '新規追加 - スペシャル', 'special' ),
'view_item' => _x( '表示 - スペシャル', 'special' ),
'search_items' => _x( '検索 - スペシャル', 'special' ),
'not_found' => _x( 'ページが見つかりません', 'special' ),
'not_found_in_trash' => _x( 'ゴミ箱にはありません', 'special' ),
'parent_item_colon' => _x( '新しいスペシャル:', 'special' ),
'special_name' => _x( 'スペシャル', 'special' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'supports' => array( 'title', 'editor' ),
'public' => true,
'show_ui' => true,
'show_in_special' => true,
'special_position' => 10,
'show_in_nav_specials' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type('special', $args );

/* カスタムタクソノミーを定義 */
register_taxonomy(
'special_cat',
'special',
array(
'label' => 'カテゴリー',
'hierarchical' => true,
'rewrite' => array('slug' => 'special')
)
);
/* カスタムタクソノミーを定義ここまで */

/* 管理画面一覧にカテゴリを表示 */
function manage_special_columns($columns) {
$columns['special_category'] = "カテゴリー";
return $columns;
}
function add_special_column($column_name, $post_id){
if( $column_name == 'special_category' ) {
//カテゴリー名取得
if( 'special_category' == $column_name ) {
$special_category = get_the_term_list($post_id, 'special_cat', '', ', ', '' );
}
//該当カテゴリーがない場合「なし」を表示
if ( isset($special_category) && $special_category ) {
echo $special_category;
} else {
echo __('None');
}
}
}
add_filter('manage_edit-special_columns', 'manage_special_columns');
add_action('manage_posts_custom_column', 'add_special_column', 10, 2);
/* 管理画面一覧にカテゴリを表示ここまで */

/* ★specialここまで★ */

/* ★blogここらから★ */
$labels = array(
'name' => _x( 'ブログ', 'blog' ),
'singular_name' => _x( 'ブログ', 'blog' ),
'add_new' => _x( '新規作成', 'blog' ),
'add_new_item' => _x( '新しく追加 - ブログ', 'blog' ),
'edit_item' => _x( '編集 - ブログ', 'blog' ),
'new_item' => _x( '新規追加 - ブログ', 'blog' ),
'view_item' => _x( '表示 - ブログ', 'blog' ),
'search_items' => _x( '検索 - ブログ', 'blog' ),
'not_found' => _x( 'ページが見つかりません', 'blog' ),
'not_found_in_trash' => _x( 'ゴミ箱にはありません', 'blog' ),
'parent_item_colon' => _x( '新しいブログ:', 'blog' ),
'blog_name' => _x( 'ブログ', 'blog' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'supports' => array( 'title', 'editor' ),
'public' => true,
'show_ui' => true,
'show_in_blog' => true,
'blog_position' => 10,
'show_in_nav_blogs' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type('blog', $args );

/* カスタムタクソノミーを定義 */
register_taxonomy(
'blog_cat',
'blog',
array(
'label' => 'カテゴリー',
'hierarchical' => true,
'rewrite' => array('slug' => 'blog')
)
);
/* カスタムタクソノミーを定義ここまで */

/* 管理画面一覧にカテゴリを表示 */
function manage_blog_columns($columns) {
$columns['blog_category'] = "カテゴリー";
return $columns;
}
function add_blog_column($column_name, $post_id){
if( $column_name == 'blog_category' ) {
//カテゴリー名取得
if( 'blog_category' == $column_name ) {
$blog_category = get_the_term_list($post_id, 'blog_cat', '', ', ', '' );
}
//該当カテゴリーがない場合「なし」を表示
if ( isset($blog_category) && $blog_category ) {
echo $blog_category;
} else {
echo __('None');
}
}
}
add_filter('manage_edit-blog_columns', 'manage_blog_columns');
add_action('manage_posts_custom_column', 'add_blog_column', 10, 2);
/* 管理画面一覧にカテゴリを表示ここまで */

/* ★blogここまで★ */
/* post_id.htmlにRewrite 複数アドレスを置き換えたい場合 参考: http://webpaprika.com/387.html まとめて記載*/
/*---- ここから ----*/
add_action('init', 'myposttype_rewrite');
function myposttype_rewrite() {
global $wp_rewrite;

/*お知らせ*/
$queryarg = 'post_type=info&p=';
$wp_rewrite->add_rewrite_tag('%info_id%', '([^/]+)',$queryarg);
$wp_rewrite->add_permastruct('info', '/info/%info_id%.html', false);

/*メニュー*/
$queryarg = 'post_type=menu&p=';
$wp_rewrite->add_rewrite_tag('%menu_id%', '([^/]+)',$queryarg);
$wp_rewrite->add_permastruct('menu', '/menu/%menu_id%.html', false);

/*スペシャル*/
$queryarg = 'post_type=special&p=';
$wp_rewrite->add_rewrite_tag('%special_id%', '([^/]+)',$queryarg);
$wp_rewrite->add_permastruct('special', '/special/%special_id%.html', false);

/*ブログ*/
$queryarg = 'post_type=blog&p=';
$wp_rewrite->add_rewrite_tag('%blog_id%', '([^/]+)',$queryarg);
$wp_rewrite->add_permastruct('blog', '/blog/%blog_id%.html', false);
}

add_filter('post_type_link', 'myposttype_permalink', 1, 3);
function myposttype_permalink($post_link, $id = 0, $leavename) {
global $wp_rewrite;
$post = &get_post($id);
if ( is_wp_error( $post ) )
return $post;
$newlink = $wp_rewrite->get_extra_permastruct($post->post_type);
$newlink = str_replace('%'.$post->post_type.'_id%', $post->ID, $newlink);
$newlink = home_url(user_trailingslashit($newlink));
return $newlink;
}
/*----ここまで----*/

/*-- カスタム投稿ページ------------------------------------------------------------------------ここまで --*/

/*特定のカスタム投稿タイプのみアーカイブでの表示件数を変える*/
add_action('pre_get_posts', 'my_pre_get_posts');
function my_pre_get_posts($query) {
if (!is_admin() && $query->is_main_query() && is_post_type_archive('info')) {
$query->set('posts_per_page', 10);
}
}

/*-- 管理画面用のスタイルシート★ 見出し・テキストエリアフォントをフロントと揃える… *--**--*--**--*--**--*--**--*--**--*--**--*--**--*--**--*--**--*--**--*--**--*--**--*--**--*--*/

add_editor_style('css/editor-style.css');

/* サーチ*/
function my_search_form( $form ) {

$form = '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'" >
<div>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="submit" id="searchsubmit" class="btn" value="'. esc_attr__('Search') .'" />
</div>
</form>';

return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

?>

パーマリンクに下記を設定 functions.php を変えたら必ず空でもパーマリンクの更新をする事を忘れない!!★
/%category%/%post_id%.html

css/editor-style.css はあとで作る。(管理画面での入力時になるべくフロントとそろえないとお客さんパニックになる場合があるため☆)
絶対更新パーマリンク☆

Twitter Bot を作ろうと思ってるのにConsumer key とConsumer secret見つかんねぇ

Twitter Bot を作ろうと思ってるのにConsumer key とConsumer secret見つかんねぇ

以前一度BOTは作ったんだけども、先週2年ぶりくらいに作ろうと思っていろんなBotの作り方のページを見た。
その中で大体必要になるのはCreate a new applicationのボタンから Access token と Access token secretと
Consumer key とConsumer secretがいるって言うのは何となく記憶あったのに、だいたいアプリの登録のページがみつかんない。

「Developer」どこだよと思って探してたら

https://dev.twitter.com

ここのようだ。見た目が大分変わってる。すぐ変わるからやなんだよねぇ、FacebookとかTwitterとかさぁ。。。
スクリーンショット 2014-09-17 0.23.38
しかもさ、、あるって書いてある場所に「My applications」メニューが無いし。。。

スクリーンショット 2014-09-17 0.24.52_r1_c1

Detalis settings API Keys Prermissions どのタブにもConsumer key とConsumer secret はない

Test OAuth のボタン押したら
スクリーンショット 2014-09-17 0.45.10

こう。。。

5日ぶりくらいで今日リトライしたけどこのままだった。
もうやーめたぁ。

wordpress 自作のテーマを作る 2014/09/ その4

突っ込んだローカルのサイトをブラウザで見てみる。まだ動きも無いけれど一応表示してみよう。

http://localhost:8888/MySweetCaffe/ おっけーだった。

では、header.phpをよりwordpressっぽくしたいと思います。

<title>[サイト名] のウェブサイト</title>の部分等を元から入ってるテーマtwenty twelveのheader.phpから持ってきてみたりする。あとで調整するかも。


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
 
    <title><?php wp_title( '|', true, 'right' ); ?></title>
 
    <!-- Bootstrap core CSS -->
	<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
  
     <!-- thema CSS -->
    <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">
     
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
<?php wp_head(); ?><!-- ここにコレが無いとプラグインが動かなくなるよ -->
  </head>
 
  <body <?php body_class(); ?>>
    
	<div id="wrapper">
	<!-- キーヴィジュアル -->
 		<div class="key-visual-wrap">
		<div class="key-visual"><img src="<?php echo get_template_directory_uri(); ?>/images/main-image.png" width="1223" height="492" alt=""/>
    <div class="logo-wrap"></div>
    <div class="map-wrap"></div></div>
		</div>
	<!-- //キーヴィジュアル -->

<a id="pagetop"></a>

	<!-- menu -->
 		<div class="menu-wrap">
		<div class="menu"><!--<p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p>-->

<!---->
<nav class="navbar navbar-default menu navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li style="font-size:22px;"><a href="<?php echo home_url(); ?>/">Info</a></li>
        <li  style="font-size:22px;"><a href="<?php echo home_url(); ?>/">Menu</a></li>
        <li  style="font-size:22px;"><a href="<?php echo home_url(); ?>/">Special</a></li>
        <li  style="font-size:22px;"><a href="<?php echo home_url(); ?>/Access">Access</a></li>
        <li  style="font-size:22px;"><a href="<?php echo home_url(); ?>/About">AboutUs</a></li>
<!--        <li class="dropdown" style="font-size:20px;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" style="font-size:20px;">
            <li><a href="<?php home_url();?>/">Action</a></li>
            <li><a href="<?php home_url();?>/">Another action</a></li>
            <li><a href="<?php home_url();?>/">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="<?php home_url();?>/">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="<?php home_url();?>/">One more separated link</a></li>
          </ul>
        </li>-->
      </ul>
<!--      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="<?php home_url();?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/b.png" width="31" height="30" alt=""/></a></li>
        <li><a href="<?php home_url();?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/f.png" width="31" height="30" alt=""/></a></li>
        <li><a href="<?php home_url();?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/t.png" width="31" height="30" alt=""/></a></li>
<!--        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="<?php home_url();?>/">Action</a></li>
            <li><a href="<?php home_url();?>/">Another action</a></li>
            <li><a href="<?php home_url();?>/">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="<?php home_url();?>/">Separated link</a></li>
          </ul>
        </li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    </div>
		</div>
	<!-- //menu -->
    
<!-- ----------この当たりまでheader.phpにしようかな-->

 

今回は店舗のページなのでトップページはとりあえず静的htmlのまま先にindex.phpをコピーしてsingle.php を作る事とした。

この間作ったsub.htmlをベースにする。

<?php get_header(); ?>と<?php get_footer(); ?>だけの状態にしてそこにsub.htmlの<div class=”contents-wrap”>・・・</div>の中身をコピペ。

 

そしてここにサイドバーを〜のところに<?php get_sidebar(); ?>を入れてやった。

single.php

sidebar.phpはまだ作ってないのだけど、デフォの項目が勝手に出てくる。あとで調整しましょってことで、次は

single.php をコピーしてpage.php を作った。

page.phpは基本このままでいいかもしれない。何かあったらあとで調整しよう。

single.php⬇️


<?php get_header(); ?>

<div class="contents-wrap">
 <div class="container">

 <div class="row"><!-- maincontents- -->
 <div class="col-md-9">

 <?php if (have_posts()) : ?>

 <?php while (have_posts()) : the_post(); ?>

 <div class="post">

 <div class="post-title clearfix">
 <h1><?php the_title(); ?></h1><div class="post-date"><span class="post-month"><?php the_time('M') ?></span> 日付:<span class="post-day"><?php the_time('j') ?>日</span><span class="post-cat"><?php the_category(', ') ?></span> </div>

 <div class="tencho1"><img src="<?php echo get_template_directory_uri(); ?>/images/tencho1.png"></div> 店長の山田と申します。肉球を個別に動かすという特技を持っております。カフェ修行3年の後、My Sweet Caffe を開店いたしました。

 <?php
 $cat = '';
 $tag = '';
 $separator = ', ';
 $before = '';
 if( get_post_type() === 'post' ) {
 $cat = get_the_category_list( $separator );
 $tag = get_the_tag_list( $before, $separator );
 } elseif( get_post_type() === 'websites' ) {
 $cat = get_the_term_list( $post->ID, 'websites_category', $before, $separator );
 $tag = get_the_term_list( $post->ID, 'websites_tag', $before, $separator );
 }
?>
カテゴリ:<?php echo $cat; ?> タグ:<?php echo $tag; ?>

カテゴリ:<?php the_terms($post->ID, 'websites_category'); ?> タグ:<?php the_terms($post->ID, 'websites_tag'); ?>

 </div>
 <div class="entry">

 <?php the_content(); ?>

 <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

 </div>

 <?php //comments_template(); ?>

 </div>

 <?php endwhile; ?>

 <div class="navigation">
 <span class="previous-entries"><?php previous_post_link(' %link') ?></span>
 <span class="next-entries"><?php next_post_link('%link') ?></span>
 </div>

 <?php else : ?>

 <h6>Sorry!</h6>
 <p>現在はこのページにはコンテンツがありません。</p>

 <?php endif; ?>

 </div><!-- //maincontents--->
 <!-- sidebar-->
 <div class="col-md-3"><?php get_sidebar(); ?></div>
 </div><!--//sidebar-->

 </div><!-- /.container -->
 <div class="container pagetop"><a href="#pagetop"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png" width="334" height="103" alt=""/></a></div>
 </div><!-- /.containt-wrap-->

<?php get_footer(); ?>

みだしはこうかなーってl感じです。スクリーンショット 2014-09-15 1.47.06

夜にケーブルtっレビで好みの映画をやっていたり 超能力操作スペシャルをやっていたりでそんなのを見ていたらなかなかすすみません。

footer.php


<!-- ----------このへんからfooter.phpにしようかな-->
  				<div id="footer" class="footer_bg">	
          <div class="container">
				<p class="copy">
					&copy; 2014 MySweetCaffe. All rights reserved. 
					Theme Design by <a href="<?php echo home_url(); ?>/">okw</a> 
					from <a href="#">MySweetCaffe</a>
				</p>
       </div>	


			</div><!-- /#footer -->

      
      
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
	</div> 



  </body>
  <?php wp_footer(); ?><!-- ここにないとだめよ -->
</html>

http://okw.minibird.jp/

ここまでの状態でテーマとしてあっぷし、表示させた段階です。

どんどんカスタマイズして行こう。でも眠いから寝ちゃったけど。

wordpress 自作のテーマを作る 2014/09/ その3

wordpress 自作のテーマを作る 2014/09/ その3

また続きです。

メニューの内容ですが

Menu
Info
はカスタム投稿に、

Special
Access
AboutUs
は固定ページにして

デフォルトの投稿はBlogで使うようにしたいと思います。

とりあえず、さっき作ったindex.html をフォルダ内の同じ場所にコピーしてindex.php にリネームします。

index.php と style.css からテーマ作成が始まります。

テーマが出てきたよ

まずはローカル環境でいろいろやりますので、MAMP や Xampp 等のローカル環境にwordpressをインストール。
その wp-content/themes/の中にさっき作った mysweetcaffe フォオルだごと突っ込む。
そしたら、こんな感じで出てきます。
screenshot.jpg という名前でイメージ画像を wp-content/themes/ の中に入れた mysweetcaffe の中直下に入れると、テーマの画面でイメージ図が出るようになります。

有効化する前に、パスをwordpress 用に変更します。
index.php を秀丸とかで開いて置き換えなんかで直してしまいます。

css 内のパスも変更。

で、いったんこんなindex.php nisita.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>[サイト名] のウェブサイト</title>

    <!-- Bootstrap core CSS -->
	<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

     <!-- thema CSS -->
    <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
  </head>

  <body>

	<div id="wrapper">
	<!-- キーヴィジュアル -->
 		<div class="key-visual-wrap">
		<div class="key-visual"><img src="<?php echo get_template_directory_uri(); ?>/images/main-image.png" width="1223" height="492" alt=""/>
    <div class="logo-wrap"></div>
    <div class="map-wrap"></div></div>
		</div>
	<!-- //キーヴィジュアル -->

<a id="pagetop"></a>

	<!-- menu -->
 		<div class="menu-wrap">
		<div class="menu"><!--<p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p>-->

<!---->
<nav class="navbar navbar-default menu navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li style="font-size:22px;"><a href="#">Info</a></li>
        <li  style="font-size:22px;"><a href="#">Menu</a></li>
        <li  style="font-size:22px;"><a href="#">Special</a></li>
        <li  style="font-size:22px;"><a href="#">Access</a></li>
        <li  style="font-size:22px;"><a href="#">AboutUs</a></li>
<!--        <li class="dropdown" style="font-size:20px;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" style="font-size:20px;">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>-->
      </ul>
<!--      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/b.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/f.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/t.png" width="31" height="30" alt=""/></a></li>
<!--        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    </div>
		</div>
	<!-- //menu -->

<!-- ----------この当たりまでheader.phpにしようかな-->

<div class="contents-wrap">
    <div class="container">

      <!--<div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>-->

      <div class="special_box clearfix">
      <div class="special_contents">
      				<div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item1.png"></div>
            <div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item2.png"></div>
            <div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item3.png"></div>
            <div class="special_item"><img src="<?php echo get_template_directory_uri(); ?>/images/item4.png"></div>
       </div>
      </div>

<!-- --------------------- -->
   <div class="top_item_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/kashikiri.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/kashikiri.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>

 <!-- --------------------- -->

<div class="top_banner_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/bosyu.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/blog.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>
 <!-- --------------------- -->

 <div class="top_info_box clearfix">
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="<?php echo get_template_directory_uri(); ?>/images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="<?php echo get_template_directory_uri(); ?>/images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="<?php echo get_template_directory_uri(); ?>/images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
    </div>

    </div><!-- /.container -->
    <div class="container pagetop"><a href="#pagetop"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png" width="334" height="103" alt=""/></a></div>
 </div><!-- /.containt-wrap -->

 <!-- ----------このへんからfooter.phpにしようかな-->
  				<div id="footer" class="footer_bg">
          <div class="container">
				<p class="copy">
					&copy; 2014 MySweetCaffe. All rights reserved.
					Theme Design by <a href="#">okw</a>
					from <a href="#">MySweetCaffe</a>
				</p>
       </div>	

			</div><!-- /#footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
	</div> 

  </body>
</html>

トップページは
 までをheader.php として別のファイルにします。
 から下はfooter.php としてコレも別ファイルにします。

 から

 までがindex.php に残った。
なので、header.php と footer.php をindex.php内に読み込む訳です。

<?php get_header(); ?>
<div class="contents-wrap"> から  </div><!-- /.containt-wrap -->
<?php get_footer(); ?>

トップページ以外のページはとりあえずサイドバーのある1パターンとして、

から

をメインの部分にして

サイドバーです。

の部分を にするのです。

いいと思いまーす。(心の声)

とりあえずindex.php header.php footer.php sidebar.php style.css ができました。

それで次はWPっぽい機能を盛り込んで行こうと思います。

wordpress 自作のテーマを作る 2014/09 その2

wordpress 自作のテーマを作る 2014/09 その2

さっきの続きです。
ページを一枚作ると書いて、思いましたが表紙とそれ以外の2ページをコーディングします。
style.css

@charset "utf-8";
/*
Theme Name: MySweetCaffe
Description: にゃっとこにゃっとこwordpressテーマ
Version: 1.0
Author: machi
Author URI: http://happy.automaticfailys.com/
*/


/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます ▽ *-----*-----**-----*-----**/

h2{
line-height: 140%; /*bootstrap.css のほうで指定されてる line-height: 40px; をリセット*/
position: relative;
border-color: #f6bfbc;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #f6bfbc;
background: #fff;
margin: 30px 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h2:after
{
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
}

h3{
position: relative;
border-color: #dbd0e6;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #dbd0e6;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h3:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h4{
position: relative;
border-color: #c1e4e9;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #c1e4e9;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h4:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h5{
position:relative;
padding:9px;
padding-left:15px;
font-weight: bold;
font-size: 18px;
background-color: #20b2aa;
color: #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size: 14px;
margin-left:20px;
width: 90%;
}

h5:before{
content:'';
height:25px;
width:2px;
display:block;
position:absolute;
top:5px;
left:4px;
background-color:#fff;
border-left: 4px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

h6{
position:relative;
padding:9px;
padding-left:15px;
font-weight: bold;
font-size: 18px;
background-color: #f08080;
color: #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size: 14px;
margin-left:20px;
width: 90%;
}

h6:before{
content:'';
height:25px;
width:2px;
display:block;
position:absolute;
top:5px;
left:4px;
background-color:#fff;
border-left: 4px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

table {
width: 100%;
margin:20px 0px 50px;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-spacing:0px;
}
table tr th,table tr td { /*「,(カンマ)」で区切って複数のセレクタを指定しています*/
font-size: 12px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 7px;
}
table tr th {
background: #f5f5dc;
}

ol{
counter-reset:li;
list-style:none;
margin:0;
padding:0;
margin-left: 20px;
}
ol li { line-height: 2; }
ol li:before {
counter-increment: li;
content: counter(li);
/*}
.maru li:before {*/
float: left;
background: #EBF5C7;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
color: #98CB54;
text-align: center;
line-height: 1.8;
}

/*WordPressには自動整形機能 用 ネイティブCSS */
p {
display: block;
margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
.aligncenter {
display: block;
margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

img[class*="wp-image-"],
img[class*="attachment-"] {
max-width: 100%;
height: auto;
}

.clearfix {
overflow: hidden;
zoom: 1;
}
.clearfix:after {
content: ""
display: block;
clear: both;
}
/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます△ *-----*-----**-----*-----**/


/*全体*/

body {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
pre {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
input,
button,
select,
textarea {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
.navbar-search .search-query {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}




/**/
html, body {
height: 100%;
margin: 0;
padding: 0;
}

div#wrapper{
	min-height: 100%;
	height: auto !important;
	width: 100%;
    font-weight:normal;
background: -moz-linear-gradient(top,  rgba(215,225,208,0.4) 0%, rgba(129,160,130,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(215,225,208,0.4)), color-stop(100%,rgba(129,160,130,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(215,225,208,0.4) 0%,rgba(129,160,130,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66d7e1d0', endColorstr='#6681a082',GradientType=0 ); /* IE6-9 */
}
.contents-wrap{
	max-width:1223px;
	margin:0 auto;
	background-color:#E1D8C5;
}

.key-visual-wrap{
	width:100%;
	background-image:url(images/bg-wood.png);
	margin:0 auto;

}
.key-visual{
	max-width:1223px;
	margin:0 auto;
	z-index: 1;
 position: relative;
}
.logo-wrap {
z-index: 2;
 position: absolute;
 background-image:url(images/logo-L.png);
 background-repeat:no-repeat;
 top: 20px;
 right: 20px;
 min-height:100px;
 min-width:350px;
}
.map-wrap {
z-index: 3;
 position: absolute;
 background-image:url(images/map-mini.png);
 background-repeat:no-repeat;
 bottom: 10px;
 right: 10px;
 min-height:250px;
 min-width:400px;
}

.menu-wrap  {

	width:100%;
	background: rgb(239,234,211); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(239,234,211,1) 0%, rgba(215,201,166,1) 40%, rgba(191,168,115,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,234,211,1)), color-stop(40%,rgba(215,201,166,1)), color-stop(100%,rgba(191,168,115,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(239,234,211,1) 0%,rgba(215,201,166,1) 40%,rgba(191,168,115,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efead3', endColorstr='#bfa873',GradientType=0 ); /* IE6-9 */
}
.menu{
	max-width:1223px;
	margin:0 auto;
	background-image:url(images/bg.png);
 /* height:62px;*/
	text-align:left ;
	border:none;
	color:#fff;
}
.headerNavBtn{
    text-align:center;
    height:3em;
    line-height:3em;
    color:#fff;
    font-size:20px;
}
.headerNavBtn:hover{
    color:#934E8A;
}

.navbar-default .navbar-brand{color:#FFFFFF}
.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{
	color: #934E8A;}

.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#ffffff;background-color:transparent; }
.navbar-default .navbar-text{color:#ffffff}.navbar-default .navbar-nav>li>a{color:#ffffff}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#934E8A;background-color:transparent}

.special_box {
	background-image:	url(images/bg-special.png);
	background-repeat:no-repeat;
	min-height:360px;
	background-position:bottom;
	text-align:right;
}
.special_contents{
		margin-top:150px;
	}
.special_item {
	float:right;
	border:3px solid #DBDBEA;
	margin-left:40px;
}
.special_item img {
    max-width: 100% !important;
  }
.top_item_box{
	margin-top:40px;
}
.top_banner_box{
	margin-top:20px;
}
.banner_item{
	width: 50%;
	padding:1%;
	float: left;
}
.banner_item img {
    max-width: 100% !important;
  }
.top_info_box{
	margin-top:30px;
}
.info_item{
		width: 50%;
	padding:1%;
	float: left;
	position: relative;
}
.info_item_mg {
	border:3px solid #DBDBEA;
	float: left;
	margin-right: 2em;
  margin-bottom: 1em;
	 max-width: 100% !important;
}
.top_info_box h3{
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background-color: #E1D8C5;
	border-color: #C09179;
	border-image: none;
	border-radius: 3px 3px 3px 3px;
	border-style: solid;
	border-width: 0 0 0 6px;
	font-size: 116%;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 15px;
	color:#C09179;
}
.top_info_box a{
	color:#808080;}
.readmore{
	text-align:right;
	position: absolute;
 bottom: 10px;
 right:10px;
 border:none;
}
#footer {
  background-image:url(images/bg-footer.png);
	padding:10px 0;
	color:#fff;
}
.pagetop{
	text-align:right;
}

index.html
トップページ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>[サイト名] のウェブサイト</title>

    <!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

     <!-- thema CSS -->
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
  </head>

  <body>

	<div id="wrapper">
	<!-- キーヴィジュアル -->
 		<div class="key-visual-wrap">
		<div class="key-visual"><img src="images/main-image.png" width="1223" height="492" alt=""/>
    <div class="logo-wrap"></div>
    <div class="map-wrap"></div></div>
		</div>
	<!-- //キーヴィジュアル -->

<a id="pagetop"></a>

	<!-- menu -->
 		<div class="menu-wrap">
		<div class="menu"><!--<p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p>-->

<!---->
<nav class="navbar navbar-default menu navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li style="font-size:22px;"><a href="#">Info</a></li>
        <li  style="font-size:22px;"><a href="#">Menu</a></li>
        <li  style="font-size:22px;"><a href="#">Special</a></li>
        <li  style="font-size:22px;"><a href="#">Access</a></li>
        <li  style="font-size:22px;"><a href="#">AboutUs</a></li>
<!--        <li class="dropdown" style="font-size:20px;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" style="font-size:20px;">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>-->
      </ul>
<!--      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/b.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/f.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/t.png" width="31" height="30" alt=""/></a></li>
<!--        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    </div>
		</div>
	<!-- //menu -->

<div class="contents-wrap">
    <div class="container">

      <!--<div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>-->

      <div class="special_box clearfix">
      <div class="special_contents">
      				<div class="special_item"><img src="images/item1.png"></div>
            <div class="special_item"><img src="images/item2.png"></div>
            <div class="special_item"><img src="images/item3.png"></div>
            <div class="special_item"><img src="images/item4.png"></div>
       </div>
      </div>

<!-- ----------------------->
   <div class="top_item_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="images/kashikiri.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="images/kashikiri.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>

 <!-- ----------------------->

<div class="top_banner_box clearfix">
   <div class="banner_item">
      <a href="#">
        <img src="images/bosyu.png" alt="スペシャルバナー1">
		</a></div>
	<div class="banner_item">
      <a href="#">
        <img src="images/blog.png" alt="スペシャルバナー1">
      </a>
    </div>
    </div>
 <!-- ----------------------->

 <div class="top_info_box clearfix">
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
   <div class="info_item">
   <h3>みだしみだしみだし</h3>
      <a href="#">
        <img src="images/info_sample.png" alt="インフォ" class="info_item_mg">
		<p>あういおいうえおいおえお</p></a>
    <p class="readmore"><img src="images/readmore.png" width="108" height="28" alt=""/></p>
    </div>
    </div>

    </div><!-- /.container -->
    <div class="container pagetop"><a href="#pagetop"><img src="images/pagetop.png" width="334" height="103" alt=""/></a></div>
 </div><!-- /.containt-wrap-->

  				<div id="footer" class="footer_bg">
          <div class="container">
				<p class="copy">
					&copy; 2014 MySweetCaffe. All rights reserved.
					Theme Design by <a href="#">okw</a>
					from <a href="#">MySweetCaffe</a>
				</p>
       </div>	

			</div><!-- /#footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
	</div> 

  </body>
</html>

サブページ
sub.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>[サイト名] のウェブサイト</title>

    <!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

     <!-- thema CSS -->
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
  </head>

  <body>

	<div id="wrapper">
	<!-- キーヴィジュアル -->
 		<div class="key-visual-wrap">
		<div class="key-visual"><img src="images/main-image2.jpg" width="1223" height="278" alt=""/>
    <div class="logo-wrap"></div>
    <!--<div class="map-wrap"></div>--></div>
		</div>
	<!-- //キーヴィジュアル -->

<a id="pagetop"></a>

	<!-- menu -->
 		<div class="menu-wrap">
		<div class="menu"><!--<p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p><p>AIUEO</p>-->

<!---->
<nav class="navbar navbar-default menu navbar-static-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li style="font-size:22px;"><a href="#">Info</a></li>
        <li  style="font-size:22px;"><a href="#">Menu</a></li>
        <li  style="font-size:22px;"><a href="#">Special</a></li>
        <li  style="font-size:22px;"><a href="#">Access</a></li>
        <li  style="font-size:22px;"><a href="#">AboutUs</a></li>
<!--        <li class="dropdown" style="font-size:20px;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" style="font-size:20px;">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>-->
      </ul>
<!--      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/b.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/f.png" width="31" height="30" alt=""/></a></li>
        <li><a href="#"><img src="images/t.png" width="31" height="30" alt=""/></a></li>
<!--        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    </div>
		</div>
	<!-- //menu -->

<div class="contents-wrap">
    <div class="container">

      <div class="row"><!-- maincontents--->
          <div class="col-md-9">
            <h1>h1 見出しの文字は、こんな感じです。</h1>
  <h1>h1 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h1>
  <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>
  <p>しかし、お編集法と、参照するユーザの対象、ShareAlikeが明確に転載さことをさば、対象主体性の執筆が記事に編集守らことがして、著作しですライセンスが引用、著作権調査ないなとの著作に満たすものは、まずないとさてよいですます。

    しかし特には、該当人物で利用されてい裁判を仮に登場含む、百科上を除外さものにより、プロジェクトの他人について方針の執筆を強く違反疑わことをなっます。または、文を法律がする濫として、同じ文字の本文を短い著作しれてなら対象の場合を引用扱うと、SA法が要件からでき雑誌により、その作品権の必要参照の一部を区別するとあたりまとめます。そのようあっ許諾記事は、アニメが指摘厳格者の該当が独自パブリックで下げ主従に、仮にしことうも即しませある。しかし、これらに問題でできことに「作成権」の著作ない。 </p>
  <h2>h2 見出しの文字は、こんな感じです。</h2>
  <h2>h2 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h2>

<p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

   <h3>h3 見出しの文字は、こんな感じです。</h3>
  <h3>h3 要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。</h3>

 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

      <h4>h4 見出しの文字は、こんな感じです。</h4>
  <h4>h4 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h4>

 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

  <h5>h5 見出しの文字は、こんな感じです。</h5>
  <h5>h5 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h5>

 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>

  <h6>h6 見出しの文字は、こんな感じです。</h6>
  <h6>h6 見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。見出しの文字は、こんな感じです。</h6>
 <p>要件はGFDLタイトルに著作し事項ですで際、考慮するれフリーに.権可能の著作ペディア・プロジェクトがしれるてはするなく、目的の文献は、説明定める文を参考ありことについて改変必要ますなてなりでん。しかし、ドメインの著作法は、対象の保護さ編集困難ます文章に創作さ、その記事で生じるて文が利用することを決議するれです。またはが、尊重著者で活用しればい文献をそのままし作ることも、該当ませませ、一部によりも検証会の認定についてフリー上の問題はしことに、本注意権も、法的の推奨を有して情報を関係行うますからいでませ。該当従っが、誰の考慮は強くなどするますん。</p>
          </div><!-- //maincontents--->
          <!-- sidebar-->
          <div class="col-md-3">サイドバーです。</div>
        </div><!--//sidebar-->

    </div><!-- /.container -->
    <div class="container pagetop"><a href="#pagetop"><img src="images/pagetop.png" width="334" height="103" alt=""/></a></div>
 </div><!-- /.containt-wrap-->

  				<div id="footer" class="footer_bg">
          <div class="container">
				<p class="copy">
					&copy; 2014 MySweetCaffe. All rights reserved.
					Theme Design by <a href="#">okw</a>
					from <a href="#">MySweetCaffe</a>
				</p>
       </div>	

			</div><!-- /#footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="js/bootstrap.min.js"></script>
	</div> 

  </body>
</html>

ここまでできたら、あとの細かいところはあとから調整しながらやるとします。

wordpressのテンプレートにするためには下の絵のようにパーツに分けたいと思います。

分け方イメージ

wordpress 自作のテーマを作る 2014/09 その1

wordpress 自作のテーマを作る 2014/09 その1

今回また1からテーマを作るので、やったことがない人にもわかるように作れればと思い残します。

1、まずはページのコンテンツを決める

作るのはカフェ店舗のページです。

今回は、トップページのほかには
メニュー
お知らせ
スペシャル
アクセス
店舗の自己紹介
店長のブログ

としました。

はてなブックマークとFacebook、Twitter のSNSボタンをつけて女性向けのデザインにしようと思いました。

2、大体のコンテンツが決まったらいやっとトップページをデザインしました。
トップページデザイン
少し変えたいような気がするけどとりあえずは。

2階層目は、とりあえずメインビジュアル部分を高さを半分以下にして、他は使いまわしで行く予定です、

デザインの中のメインイメージ(鳥の写真)以外は、http://www.pakutaso.com/で借りてきました。鳥の写真はこの間夏休みに旅行先でとったカワゲラさんです。

デザインは大体こんな感じでいいかなと思ったところで、必要なパーツにスライスしていきます。
デザインの制作もスライスもわたしはAdobeのFireworksを使っています。
ばらばらとスライス

普通のHTMLページを作る

さっきバラバラにしたスライスを使ってトップページを静的HTMLでふつーに作ります。
自分のローカルのどこでもいいので専用のフォルダを作製してそこで作業しようと思います。
こんな感じで
フォルダはこんな感じで
mysweetcaffe のフォルダの中に index,html と images のフォルダを作っておきました。
css と js フォルダもどうせいるので作りました。

index.html は http://getbootstrap.com/examples/starter-template/ のスタートアップテンプレートを取り合えアズ参考にした。
Bootstrap3を使いたいので、公式http://getbootstrap.com/ で ダウンロードしてきます。バージョンはこの時は Currently v3.2.0 って書いてありました。これ。
あとは アイコンも使いたいので http://glyphicons.getbootstrap.com/ に行ってGlyphiconsのリンク文字列をコピーします。index.html にコピーした を貼り付けます。

bootstrap-3.2.0-distのフォルダの中に、は css font js のフォルダがありまので
css の中からbootstrap.min.css を mysweetcaffe の中に css フォルダを作って突っ込みます。
bootstrap.min.js のふファイルもmysweetcaffe の中に js フォルダを作って入れます。

これもindex.htmlのhead中に書いておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <s</script>
    <script src="js/bootstrap.min.js"></script>

  </body>
</html>

これをもとにしてDreamweaverでページを一枚作ってしまいます。

自作のwordpressのテーマの制作の際に管理画面と合わせて使うCSS

自作のwordpressのテーマの制作の際に管理画面と合わせて使うCSS

自作のwordpressのテーマの制作hの際に
eeditor_cssとフロントのCSSでおなじのを書いておく。


/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます ▽ *-----*-----**-----*-----**/

h2 {
position: relative;
color: #efab93;
background: #ffe4e1;
line-height: 1;
margin: 30px -10px 30px -10px;
padding: 15px 5px 10px 40px;
box-shadow: 0 1px 3px #efab93;
font-size: 16px;
}
h2:after,h2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #ffdab9;
font-size: 16px;
}
h2:after {
left: 0;
border-right: 5px solid #ffdab9;
}
h2:before {
right: 0;
border-left: 5px solid #ffdab9;
}
/*#f6bfbc*/
h3{
line-height: 140%; /*bootstrap.css のほうで指定されてる line-height: 40px; をリセット*/
position: relative;
border-color: #f6bfbc;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #f6bfbc;
background: #fff;
margin: 30px 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h3:after
{
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
}

h4{
position: relative;
border-color: #dbd0e6;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #dbd0e6;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h4:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h5{
position: relative;
border-color: #c1e4e9;
border-style: solid;
border-width: 5px 5px 5px 0;
border-left:1px solid #c1e4e9;
background: #fff;
margin: 0 0 15px -1px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
font-size: 14px;
}

h5:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

h6{
position:relative;
padding:9px;
padding-left:15px;
font-weight: bold;
font-size: 18px;
background-color: #c7dc68;
color: #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size: 14px;
margin-left:20px;
width: 90%;
}

h6:before{
content:'';
height:25px;
width:2px;
display:block;
position:absolute;
top:5px;
left:4px;
background-color:#fff;
border-left: 4px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

table {
width: 100%;
margin:20px 0px 50px;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-spacing:0px;
}
table tr th,table tr td { /*「,(カンマ)」で区切って複数のセレクタを指定しています*/
font-size: 12px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 7px;
}
table tr th {
background: #f5f5dc;
}

ol{
counter-reset:li;
list-style:none;
margin:0;
padding:0;
margin-left: 20px;
}
ol li { line-height: 2; }
ol li:before {
counter-increment: li;
content: counter(li);
/*}
.maru li:before {*/
float: left;
background: #EBF5C7;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
color: #98CB54;
text-align: center;
line-height: 1.8;
}

/*WordPressには自動整形機能 用 ネイティブCSS */
p {
display: block;
margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
.aligncenter {
display: block;
margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

img[class*="wp-image-"],
img[class*="attachment-"] {
max-width: 100%;
height: auto;
}

.clearfix {
overflow: hidden;
zoom: 1;
}
.clearfix:after {
content: ""
display: block;
clear: both;
}
/*-----*-----**-----*-----**-----*-----*eeditor_cssと揃えます△ *-----*-----**-----*-----**/