drawer.js アンドロイドでメニューがスクロールしない 

腹立たしいほどハマってしまったので、記録したい。
元は、iScroll.js と drawer.js のハンバーガーメニューがAndroidで動かない
https://qiita.com/YujiHatanaka/items/64b6a6c8facb3a2f69b5

内容——–

iScroll.js と drawer.js のハンバーガーメニューがAndroidで動かない
JavaScript
iscroll.js
概要

drawer.jsを使った、スマホ用バーガーメニュー実装で、新しいAndroidのChromeにおいて長いメニューがスクロールしない症状がありました。スクロールは、全くしない訳では無く、フリックで素早く動かすと若干スクロールするものの、通常のタップ移動では指を離したタイミングでメニューが閉じてしまいます。この不具合の修正を試みました。
詳細

Androidでは、2016年末頃からスクロール動作を滑らかにするために、addEventListenerにイベントを登録する際、デフォルトでそのイベント内部の preventDefault を実行しないモードになりました。
jQuery の on() でイベントを登録している場合、addEventListener の第3引数に {passive: false} を加えられるようなオプションは無いため、drawer.js内部で on()を使用している箇所をaddEventListener を使って書き直す必要があります。加えて何かとバグの多いiscroll.js ではAndroidのタッチ動作をうまく検出出来ていない様子なので、スマホだけに表示させる画面、という前提で動作するよう修正試みました。
修正ポイント
drawer.js(v3.2.2)
19行目

iScroll.js のデフォルトオプションを定義している部分。preventDefaultが基本ONになるようにしている。
修正前
drawer.js

preventDefault: false

修正後
drawer.js

preventDefault: true,

107行目

修正前
drawer.js

if (touches) {
$this.on(‘touchmove.’ + namespace, function disableTouch(event) {
event.preventDefault();
});
}

修正後
drawer.js

if (touches) {
document.addEventListener(‘touchmove.’ + namespace, function disableTouch(event) {
event.preventDefault();
}, {passive: false});
}

iscroll.js(v5.2.0)
42行目

内部でaddEventListnerを addEventとしてエイリアスを作っている部分があるので、ここで Android対応の書き方にする。
修正前
iscroll.js

me.addEvent = function (el, type, fn, capture) {
el.addEventListener(type, fn, !!capture);
};

修正後
iscroll.js

me.addEvent = function (el, type, fn, capture) {
el.addEventListener(type, fn, {passive: false});
};

191行目

マウスポインタの場合の処理だが、スマホのみで使う前提なので、タッチイベントと同じものとして扱わせる。

修正前
iscroll.js

pointerdown: 3,
pointermove: 3,
pointerup: 3,

修正後
iscroll.js

pointerdown: 1,
pointermove: 1,
pointerup: 1,

331行目

ポインター、マウスなどをdisableにする処理だが、条件分岐がAndroidの場合、望んだとおりにならないようなので、タッチデバイスしか扱わないのとChromeのデバッグ環境でも動くことを考えて修正。

修正前
iscroll.js

disablePointer : !utils.hasPointer,
disableTouch : utils.hasPointer || !utils.hasTouch,
disableMouse : utils.hasPointer || utils.hasTouch,

修正後
iscroll.js

disablePointer : false,
disableTouch : false,
disableMouse : false,

482行目、622行目

e.preventDefault();をコメントアウト

これは
IScroll.prototype = {の中の
_start: と
_end: のpreventDefault を無効にしている。

以上で Android と iPhoneで正常動作するようになった。
参考

Android Chrome beta (v.56) でdocumentに対するtouchイベントのpreventDefaultが効かない
(http://qiita.com/ru_shalm/items/4d79e94b5d9c7c88607d)
一連の根本的な原因、ChromeのaddEventListenerについての挙動について説明があります。

Passive Event Listeners によるスクロールの改善
(https://blog.jxck.io/entries/2016-06-09/passive-event-listeners.html)
さらに詳細な情報があって、理解が深まります。

この問題が起きているときに、Chromeブラウザのデバッグコンソールに以下のメッセージがでます。
Unable to preventDefault inside passive event listener due to target being treated as passive.

この内容は Takumi Hirashima Artworks の http://hirashimatakumi.com/blog/7.html コピーです。

WordPress のプラグイン Advanced custom field の表示方法を紹介します。
Advanced custom field(以下ACF)は WordPress で柔軟なカスタムフィールドを制作できる便利なプラグインです。
この投稿では、基本的な表示方法から取得の際の注意点や、表示されない時の対処方法などを紹介していきます。

1.基本的な表示方法と注意点

まずはACFの基本的な表示方法と表示されない時の対処方法や注意点などを紹介します。

投稿のフィールド値の取得と表示方法

投稿に入力されているフィールド値を表示する場合は the_field() を使用します。

<?php the_field('text_field'); ?>

フィールド名を変更する場合は the_field('text_field') 内のフィールド名 text_field を変更します。
フィールド値を取得したい場合は get_field() を使用します。

<?php $text_field = get_field('text_field'); ?>
取得した値を表示したいときは echo を使います。
<?php echo $text_field; ?>

別の投稿のフィールド値を表示

別の投稿のフィールド値を取得する場合は フィールド名の後にポストIDを指定することでフィールド値を取得できます。
例えば、特定の固定ページに入力されているフィールド値を表示したい場合は、フィールド名の指定の後に該当ページのページIDを指定します。
次コードは、ページIDが 123 の場合の表示方法です。

<?php the_field('text_field',123); ?>

現在表示しているページの親ページIDを取得するには WordPress 直上の親ページのIDやスラッグを取得をご覧ください。

オプションページからフィールド値を取得

ACF のアドオン Options Page(オプションページ)を使ってフィールド値を取得して表示する場合は、フィールド名の後に option を追加します。

<?php the_field('text_field','option'); ?>

または

<?php the_field('text_field','options'); ?>

ACF のアドオンオプションページを使用する場合は option または options を追加します。
オプションページから値の取得がうまくいかない場合はこの項目を確認しましょう。
オプションページの詳しい表示方法は、Advanced Custom Feld のアドオン Options Page の表示方法をご覧ください。

条件分岐を使った表示方法

条件分岐を使った表示方法を紹介します。
次のコードは、if 構文を使った場合の表示方法です。

<?php if(get_field('text_field')): ?>
<?php the_field('text_field'); ?>
<?php endif; ?>

if 構文の時には代入演算子を使うと便利です。
代入演算子を使う場合は必ず get_field() を使います。

<?php $text = get_field('text'); if( $text ): ?>
<?php echo $text; ?>
<?php endif; ?>

if 構文をシンプルにするなら次のような方法もあります。

<?php $text = get_field('text_field'); if( $text ){ echo $text; }?>

Repeater Field のフィールド値を表示

ACF の有料アドオン Repeater Field(リピーターフィールド)を使う場合は the_sub_field() を使います。
Repeater Field の詳細は、Advanced Custom Feld のアドオン Repeater Field の表示方法をご覧ください。

<?php the_sub_field('sub_field_name'); ?>

代入演算子を使う場合は get_sub_field() を使います。

<?php $sub_field_name = get_sub_field('sub_field_name'); ?>

リピーターフィールドの取得がうまくいかない場合は the_sub_field()get_sub_field() になっていることを確認しましょう。

注意点

ACF を使う上での注意点をリストアップしました。
フィールド値が表示されない場合は次の点を確認してみましょう。

  • the_fieldget_field の使い所を間違えている
  • リピーターフィールドの表示で the_fieldthe_sub_field の使い所を間違えている
  • オプションフィールドの表示で option を書き忘れてしまう
  • そもそも指定しているフィールド名が合っていない
  • 画像オブジェクトの返り値の指定が表示の指定と合っていない

などなど

リピーターフィールドや柔軟コンテンツ内で、フィールド値を取得や表示する場合は the_sub_field になります。
これを間違えて「あぁ、表示されない!」ってことがよくあるので気をつけましょう。
次は実践的な表示方法をを紹介していきます。

2.テキストフ​​ィールドの表示

フィールドタイプ「テキスト」「テキストエリア」「数値」「メール」「パスワード」の表示方法を紹介します。
このフィールドタイプは単一の文字列値を格納するのに適しています。

<?php the_field('text'); ?>

3.画像フィールドの表示

画像フィールドの表示方法を紹介します。
テキストフィールドと同じくらい頻繁に使うのが画像フィールドです。
フィールドの表示と取得方法が何通りかあるので、使用する場面を見て使い分けていきましょう。

画像の表示(返り値:オブジェクト)

<?php $image = get_field('image'); if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>

画像の登録が絶対にあるならシンプルにこんな書き方もできます。

<img src="<?php $image = get_field('image'); echo $image['sizes']['medium']; ?>" />

画像の URL やタイトルなどを個別に取り出す場合はこちら。

<?php
$image = get_field('image');
if( !empty($image) ):
// 画像から各種値を取り出す
$url = $image['url']; // URL
$title = $image['title']; // タイトル
$alt = $image['alt']; // 代替テキスト
$caption = $image['caption']; // キャプション
$description = $image['description']; // 説明
// thumbnail
$size = 'thumbnail'; // 画像サイズ thumbnail(サムネイル), medium(中サイズ), large(大サイズ), full(元画像)
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ]; // 横幅
$height = $image['sizes'][ $size . '-height' ]; // 高さ
?>
<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
</a>
<p>
<?php echo $caption; ?>
<?php echo $description; ?>
</p>
<?php endif; ?>

画像の表示(返り値:URL)

次のコードは、画像の返り値がURLの場合の表示方法です。

<?php if( get_field('image') ): ?>
<img src="<?php the_field('image'); ?>" />
<?php endif; ?>

画像の表示(返り値:ID)

次のコードは、画像の返り値がIDの場合の表示方法です。

<?php
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>

画像の登録が絶対にあるならシンプルにこんな書き方もできます。

<?php echo wp_get_attachment_image(the_field('image'),'large'); ?>

4.チェックボックス・ラジオボタンフィールドの表示

チェックボックスフィールドとラジオボタンフィールドの表示方法を紹介します。

値が一つの場合

チェックボックスフィールドとラジオボタンフィールドで値が一つの場合の表示方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に値 red を表示します。

<?php the_field('colors'); ?>

値が複数の場合

チェックボックスフィールドで登録した値が複数の場合の表示方法です。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php
$colors = get_field('colors'); // 値の代入
if( $colors ){
echo implode(', ', $colors); // 配列要素を文字列「, 」で連結して表示
}
?>

値をタグなどで囲む場合は次のような方法があります。
次のコードは、フィールド名が colors の場合に項目をリストにして表示する方法です。

<?php $field = get_field('colors'); if ($field): ?>
<ul>
<?php foreach( $field as $value ): ?>
<li>
<?php echo $value; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

条件付きで表示する場合

チェックボックスフィールドとラジオボタンフィールドで値を条件付きで表示する方法を紹介します。
フィールド名が colors 登録している値が red:赤 の登録があるかどうかを判別して表示する方法です。

<?php if(get_field('colors') == 'red') { echo 'red'; } ?>

ラベルを取得する場合

ラジオボタンフィールドでラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合にラベル赤を表示します。

<?php
$field = get_field_object('colors');
$value = $field['value'];
$label = $field['choices'][ $value ]; // ラベルを取得
echo $label; // ラベルを表示
?>

チェックボックスフィールドでラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値が red:赤 の場合にラベル(赤)を表示します。

<?php
$field = get_field_object('colors');
$colors = $field['value'];
if( $colors ){
foreach( $colors as $color ){
echo $field['choices'][ $color ];
}
}
?>

5.セレクタフィールドの表示

セレクタフィールドの表示方法を紹介します。
セレクターフィールドはチェックボックスとラジオボタンに似た表示方法になります。

値が一つの場合

セレクターフィールドで値が一つ場合の表示方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に red を表示します。

<?php the_field('colors'); ?>

値が複数の場合

セレクターフィールドで登録した値が複数の場合の表示方法です。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php
$colors = get_field('colors'); // 値の代入
if( $colors ){
echo implode(', ', $colors); // 配列要素を文字列「, 」で連結して表示
}
?>

条件付きで表示する場合

セレクターフィールドで値を条件付きで表示する方法を紹介します。
フィールド名が colors 登録している値が red:赤 の登録があるかどうかを判別して表示する方法です。


<?php if(get_field('colors') == 'red') { echo 'red'; } ?>

次のコードは、値が複数の場合の表示方法です。

<?php
if(in_array('red', get_field('colors'))) {
echo '選択したのは red です';
} elseif(in_array('blue', get_field('colors'))) {
echo '選択したのは blue です';
}
?>

ラベルを取得する場合

セレクトフィールドのラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合にラベル赤を表示します。

<?php
$field = get_field_object('colors');
$value = $field['value'];
$label = $field['choices'][ $value ]; // ラベルの取得
echo $label; // ラベルを表示
?>

6.投稿オブジェクトの表示

投稿オブジェクトを表示する方法を紹介します。

投稿オブジェクトが一つの場合

次のコードは、フィールド名が post_objects の場合に、投稿のタイトル・リンク・アイキャッチ画像を表示します。

<?php $post_objects = get_field('post_objects'); if( $post_objects ): // 投稿オブジェクトの取得 ?>
<a href="<?php echo get_permalink($post_objects->ID); // ID指定でリンクを取得 ?>">
<?php if ( has_post_thumbnail($post_objects->ID)): //アイキャッチ画像があれば ?>
<?php //アイキャッチ画像の取得
$thumbnail_id = get_post_thumbnail_id($post_objects->ID); // アタッチメントIDの取得
$image = wp_get_attachment_image_src($thumbnail_id,'full'); //「full」サイズのアイキャッチの情報を取得
$src = $image[0];    // URL
$width = $image[1];  // 横幅
$height = $image[2]; // 高さ
echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" />';
?>
<?php else: //画像がない場合 ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/nowprinting.png" alt="nowprinting" />
<?php endif; ?>
<?php echo get_the_title($post_objects->ID); //タイトルの取得 ?>
</a>
<?php endif; ?>

投稿オブジェクトが複数の場合(グローバル変数へセットする場合)

グローバル変数へセットすることで、通常の投稿と同じような関数で値を取得することができます。
ここで重要なのは、グローバル変数へセットした時は必ずポストオブジェクトをリセットすることです。
ここでポストオブジェックトをリセットしないと、ページの残りの部分が正常に動作しない場合があります。

<?php $acf_post_objects = get_field('post_objects'); if( $acf_post_objects ): ?>
<ul>
<?php foreach( $acf_post_objects as $post): // ループの開始 ?>
<?php setup_postdata($post); // 重要! setup_postdata でポストオブジェクトを呼び出します ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<span>カスタムフィールド<?php the_field('field_name'); ?></span>
</li>
<?php endforeach; // ループの終了 ?>
</ul>
<?php wp_reset_postdata(); // ページの残りの部分は正常に動作するように、ポストオブジェクトをリセットします ?>
<?php endif; ?>

投稿オブジェクトが複数の場合(グローバル変数へセットしない場合)

グローバル変数へセットしない場合は投稿IDから各種値を取得します。

<?php $acf_post_objects = get_field('post_objects'); if( $acf_post_objects ): ?>
<ul>
<?php foreach( $acf_post_objects as $acf_post_object): // ループの開始 ?>
<li>
<a href="<?php echo get_permalink($acf_post_object->ID); ?>"><?php echo get_the_title($acf_post_object->ID); ?></a>
<span>カスタムフィールド:<?php the_field('field_name', $acf_post_object->ID); ?></span>
</li>
<?php endforeach; // ループの終了 ?>
</ul>
<?php endif;?>

7.デイトピッカーの表示

デイトピッカーフィールド(日付)の表示方法を紹介します。

基本の表示

次のコードは、フィールド名が date の場合の表示方法です。

<?php the_field('date'); ?>

高度な表示

表示される日付の値をカスタマイズしたい場合は、次のように調整することが可能です。
次のコードは YYYYMMDD の形式で保存された生の値を取得し、それを修正するために数値を変換する方法です。

<?php
$date = get_field('date', false, false); //値の取得
$date = new DateTime($date); //日付オブジェクトの作成
echo $date->format('j M Y'); //日付の表示
?>

その他

その他に、直接日本語表記に変更したい場合は、管理画面で以下のフィールドの設定を任意で変更してみましょう。

Display Format
表示フォーマット
管理画面に表示されるときの日付形式を入力します。年月日を入れて値を返したい場合は「yy年m月d日」とするのがよいでしょう。
Return format
フォーマットを保存する
表示される値の日付形式を入力します。値は常にDBでYYYYMMDDとして保存されることに注意してください。年月日を入れて値を返したい場合は「yy年m月d日」とするのがよいでしょう。
Week Starts On
週の開始
週を開始する曜日を指定します

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

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 その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でページを一枚作ってしまいます。

なんでー、UTF8なのに文字化けだ!!

なんでー、UTF8なのに文字化けだ!!

Googlemap のapi を使って、タウンマップ様の物を作っています。
データベースもUTF8,ファイルもUTF8なのに、文字化けが発生。

mysql_query(“set names utf8”); しても駄目。

えーなんで?なんで??ととりあえず思いつく限りの事をやってみて、駄目なのであきらめ。

少し調べたらhttp://kennyqi.com/archives/61.htmlのサイトに解決方法が。

mysql_set_charset(‘utf8’);

DB接続のあとにコレを入れたら、マップのインフォメーションウィンドウの中に、DBからとってきた文字列が文字化けせずに入りましたー。

すごーいすごーい

php.ini でアップロードできるファイルのサイズを変更する 適当に。

php.ini でアップロードできるファイルのサイズを変更する 適当に。

インポートするデータを受信できませんでした。ファイル名が送信されていないか、ファイルサイズが PHP の設定で許可された最大値を超えています。FAQ 1.16をご覧ください

とか

ファイルサイズが PHP の設定で許可された最大値を超えています。

とでて怒られる場合

php.ini の400行目くらい

; Maximum allowed size for uploaded files.
upload_max_filesize = 2M

upload_max_filesize = 20M

php.ini の200行目くらい

memory_limit = 128M ; Maximum amount of memory a script may consume (8MB)

memory_limit = 256M  ; Maximum amount of memory a script may consume (8MB)

memory_limitはやんなくてもいいかも

INSTANTWPで
InstantWP_4.3.1iwpserverserverconfig_tpl php.ini ったら、ここにもあった

PHP PDO 接続用ファイルさくらのサーバ&local共用で使えるver

PHP PDO 接続用ファイルさくらのサーバ&local共用で使えるver

ローカルで開発と、さくらサーバに納品、という案件はよくありまして、PHPとかの接続設定のファイルをローカル用とさくらサーバ用で用意していたんですがめんどくさくなったので共用にしました。


// config.php

// 本番 さくら
 if ($_SERVER['SERVER_NAME'] === 'happy,automaticfairus.com') {
 $cc = array(
 'source' => "MYSQL"
 , 'location' => "mysql番号’.db.sakura.ne.jp"
 , 'dbname' => "DB名"
 , 'user' => "ユーザ名"
 , 'password' => "データベースのパスワード"
 , 'options' => array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`")
 );
 } else {
 // // localhost
 $cc = array(
 'source' => "MYSQL"
 , 'location' => "localhost"
 , 'dbname' => "ローカルのDB名"
 , 'user' => "ローカルのユーザ名rootとか"
 , 'password' => "ローカルのパスワードrootとか"
 , 'options' => array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`")
 );
 }
 $dsn = "mysql:dbname={$cc['dbname']};host={$cc['location']}";
 try {
 $dbh = new PDO($dsn, $cc['user'], $cc['password'], $cc['options']);
 print('接続に成功しました。<br>');//テスト用
 } catch(PDOException $e){
 exit('データベースに接続できませんでした。' . $e->getMessage());
 }

$dbh->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

$dbh = null;

これで、いちいち切り替えなくても済むようになりました

iPadminiにCodaを入れてみる

iPadminiにCodaを入れてみる

ipadからウェブの更新がしたいなーと思っていたところエディタのCodaのアプリが良いらしいというネットの噂を聞きつけて試してみました。

DietCodaという名称でした♪

2,000円だったので10秒くらい悩みました。

でも他に良さそうなアプリも無かったので、今日はどこも出かけないし、家からで無いと決めたからお金も使わない日だし、いいか!と思って購入。

外に行けばなんやかんやで小銭大銭使ってしまいますからね。

Coda2ってとても有名なエディタなんですが、実は使った事がありません。欲しいけど、今差し迫って不便ではなかったりして、いつも見るだけ。

DLして立ち上げたらしたら、すぐにサイト設定をする画面です。

サイト設定

dietcodaサイト設定
dietcodaサイト設定

名前 適当でOK

URL サイトのURL

リモートルート レンタルサーバー等で推奨があったりすれば記入

プロトコル SFTPや FTP が選べます。エックスサーバーの無料のスペースはFTPだけみたいなのでFTPで。

サーバアドレス ID文字列.html.xdomain.jp

パスワード ※エックスサーバのサーバ設定から FTP 設定にすすんで 最初にパスワード設定する

上記を設定すると、勝手にサーバーに接続しにいき、問題なく接続されれば「サイト」メニューに追加されます。

接続ができないときは、サーバーアドレスやユーザ名をレンタルサーバーのホームページやメール等からコピペするやり方でやってみてください。

DietCodaでサーバーの中が見えました。

◎のボタンを押したら、DietCoda上で編集ができます。

ファイルを編集

ファイルを保存すると、すぐにウェブに反映されます。
便利!