2018年6月 – 暮らしのハンドノート

2018年6月28日2018年6月28日

近くで足湯カフェをお探しならおかみの足湯

先日、移転先の「おかみの足湯」に行ってきました!

2014年07月14日放送のアサデスで紹介された「おかみの足湯」屋さんは、

以前福岡県飯塚市東町商店街内にあったのですが、

2017年9月に福岡県飯塚市枝国402-57に移転していて

現在一戸建ての建物に店舗を構えてあります。

駐車場完備なので、ドライブがてら、ちょっと寄ってみるのにいいと思います。

料金

気になる料金は

30分　500円

60分　600円

え～!!倍以上になるの？　いえ違います。60分足湯に浸かっても合計金額が600円で100円プラスされるだけです。

こちらの、番頭さんやおかみさんが非常に良心的な方で、光明石の効果を実感してもらいたくて、かなり良心的な価格になっているだけです。

なんか申し訳ない気がします。

カフェ

さらに、足湯に遣っていると珈琲が無料で出てきてしまうんです。

そのcoffeeは、普通の水ではなく、「光明水」を使われています。

これまた、美味しいんです!

え～!!coffeeも飲めて一時間600円!!

普通に喫茶店に行ってコーヒーを飲むと考えるなら、足湯が無料みたいな感じですよね。

本当にビックリです!!

おかみさんや番頭さんの心遣いに感謝です!

だって・・光明石の足湯を購入するとなんとビックリ!標準価格で確か\280,000くらいだったと思います。

こんな高価な商品を低価格で実感できるんですもの良心的としか表現できません!

みなさんも、飯塚方面に行かれた時は、「おかみの足湯」に行かれてみてはいかがですか？

営業時間

平日11:00-16:00

土・日・祝日はお休みです。

所在地:〒820-0081 福岡県飯塚市枝国４０２−５７

連絡先: 090-1876-0621

あまりに良心的すぎるもので私も何とか「おかみの足湯」屋さんを応援したく

当サイトで「おかみの足湯」屋さんの予約ペーシを開設させていただいております。

夜間にしか予約できない方もしくは、上記の電話にかけてもすぐに連絡が取れなかった場合などはこちらの予約フォームを活用してください。

みなさんも、健康な笑顔を!!

2018年6月21日2018年6月21日

無料のHTML・CSSテンプレートをWordPress化する方法No.6(タイトルタグの自動認識・ぱんくずリスト/ページ送りの実装)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版（10/8.1/8/7 64-bit）
MAMP:4.0.1
Atom:1.27.2

SEOに重要なタイトルタグとディスクリプションをします。

タイトルタグとディスクリプションの変更

タイトルタグの変更

header.phpにwordpressが自動で認識してもらえるようにタグを入れ替えていきます。

atomでheader.phpを開いて13行目のにある

<title>あなたのサイト名などお書きください</title>

を削除して以下のコードを挿入します。

<title><?php bloginfo('name'); ?></title>

1	<title><?php bloginfo('name'); ?></title>

ディスクリプションの変更

次に、サイト説明が反映されるように22行目にある

<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。</p>

の部分を以下のコードに書き換えます

<p><?php bloginfo('description'); ?></p>

1	<p><?php bloginfo('description'); ?></p>

次にサイトタイトルとページ名が併記されるようにfunction.phpに以下のコードを追記します。

function my_setup_theme() {
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme','my_setup_theme' );

function my_setup_theme() {

add_theme_support( 'title-tag' );

}

add_action( 'after_setup_theme','my_setup_theme' );

※この場合headar.phpのタイトルタグは削除します。

titleタグの削除

それでは、まずheader.php内のtitleタグ

を削除して保存しましょう

サイトを確認すると以下のようにwordpressで設定したサイト名とディスクリプションが表示されます。

パングズリストの対応

index.php内をみると以下のようにパンクズリストがループの外にあります。

ループ外で記事タイトルを表示するには、

下層ページ全般に使える以下のタグを使用します。

<?php wp_title(); ?>

それでは、index.phpの4行目にあるサンプルページを削除して上記のタグを挿入して保存します。

<a href=”<?php echo home_url();?>”>HOME</a> > サンプルページ

サイトを更新して確認すると以下のようにぱんグスリストが正常に表示されいるのがわかると思います。

ページ送りの実装

index.php　19行目くらいにあるのインデックスページに戻るの直前に以下のタグを入れたいと思います。

<p>
<?php next_posts_link('次ページへ'); ?>
<?php previous_posts_link('前ページへ'); ?>
</p>

<p>

<?php next_posts_link('次ページへ'); ?>

<?php previous_posts_link('前ページへ'); ?>

</p>

タグ挿入後以下のサンプル画像のようになります。

役に立ったら共有してね

2018年6月20日2018年6月20日

無料のHTML・CSSテンプレートをWordPress化する方法No.5(ウィジェットとカスタムメニューを追加する)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版（10/8.1/8/7 64-bit）
MAMP:4.0.1
Atom:1.27.2

今回は、オリジナルのテーマにウィジェットとカスタムメニューを対応させていきます。

ウイジェツトに対応させる

まず、atomに　functions.php　のファイルを作ります。

functions.phpは最初から最後までphpファイルになりますので

1.functions.phpに開始タグと終了タグを記述します。

<?php

//ここは機能追加する内容を追記するエリアです。

//

?>

<?php

//ここは機能追加する内容を追記するエリアです。

2.上記開始タグと終了タグの間に以下のようにコードを加えます

WordPress.ORGより

register_sidebar( array(
		'name'          => __( 'ウィジェットエリア' ),
		'id'            => 'my-sidebar',
		'description'   => __( 'サイドバーに表示されるウィジェットをここに追加してください。'),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

register_sidebar( array(

'name' => __( 'ウィジェットエリア' ),

'id' => 'my-sidebar',

'description' => __( 'サイドバーに表示されるウィジェットをここに追加してください。'),

'before_widget' => '<aside id="%1$s" class="widget %2$s">',

'after_widget' => '</aside>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

) );

参考に、私は以下のように記述しました。

<?php

//ウィジェットエリアの追加

	register_sidebar( array(
		'name'          => __( 'ウィジェットエリア' ),
		'id'            => 'my-sidebar',
		'description'   => __( 'サイドバーに表示されるウィジェットをここに追加してください。' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );


?>

<?php

//ウィジェットエリアの追加

register_sidebar( array(

'name' => __( 'ウィジェットエリア' ),

'id' => 'my-sidebar',

'description' => __( 'サイドバーに表示されるウィジェットをここに追加してください。' ),

'before_widget' => '<aside id="%1$s" class="widget %2$s">',

'after_widget' => '</aside>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

) );

3.sidebar.phpに以下のコードを加えます

wordPress関数リファレンスより

<?php dynamic_sidebar('sidebar-1'); ?)>

1	<?php dynamic_sidebar('sidebar-1'); ?)>

挿入後の画像は以下の通りです。(18行目です)

WordPressの管理画面から外観にポインタをあてるとウィジェットを選択でるようになっていますので確認してくださいね。

カスタムメニューに対応させる

1.functions.phpに以下のコードを追加します。

今回はフッターにメニューを追記するのでメニュー名はfooterのみでいいのですが、今後のことを考えて今回は、全て記述します。

//カスタムメニューの追加

register_nav_menus( //メニュー機能をオンにする
 array(
 'place_global' => 'グローバル',  //“メニュー英語名” =>”メニュー名”,
 'place_utility' => 'ユーティリティ',
 'place_sidebar' => 'サイドメニュー',
 'place_footer' => 'フッター',
 )
);

//カスタムメニューの追加

register_nav_menus( //メニュー機能をオンにする

array(

'place_global' => 'グローバル', //“メニュー英語名” =>”メニュー名”,

'place_utility' => 'ユーティリティ',

'place_sidebar' => 'サイドメニュー',

'place_footer' => 'フッター',

)

);

先ほどfunctions.phpに記述しましたので、以下のように記述します。

2.footer.phpに以下のコードを追記する

それでは、以下のコードをfooterに追記します。

<?php wp_nav_menu( array(
            'theme_location'=>'place_footer', 
            'container'     =>'', 
            'menu_class'    =>'',
            'items_wrap' => '%3$s',//<ul>を出力しない
          ));
    ?>

<?php wp_nav_menu( array(

'theme_location'=>'place_footer',

'container' =>'',

'menu_class' =>'',

'items_wrap' => '%3$s',//<ul>を出力しない

));

次にwordpressの管理画面の外観から→メニューを選択し

メニュー名にplace_footerと入力しメニューを作成ボタンをクリックします。

次にメニュー構造のメニュー設定で

フッターにチェックを入れて、メニューを保存します。

すると位置管理のタブができるので、位置管理をクリックします。

次に位置の管理タブの中のフッターからplace_footerをクリックして変更を保存します。

フッターに表示させたいメニューを選択してメニューに追加します。

するとメニュー構造の中に追加したメニユーが表示されますので、表示したい順番などドラッグ＆ドロップで変更して保存してください。

役に立ったら共有してね

2018年6月19日2018年6月19日

無料のHTML・CSSテンプレートをWordPress化する方法No.4(必須ダグとループ処理)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版（10/8.1/8/7 64-bit）
MAMP:4.0.1
Atom:1.27.2

WordPress必須タグを挿入する

wordpressのテンプレートを作成するときに必ず入れないといけないとされている必須のタグが3つあります。

タグ	用途
<?php body_class(); ?>	<body>タグの中に入れる
<?php wp_head(); ?>	<head></head>タグの中に入れる
<?php wp_footer(); ?>	フッター内であればどこでもOK

header.phpの<body>タグを編集する

bodyタグを入れればクラス属性として吐き出されますので、

特定のテンプレートやページだけにスタイルを適応することができます。

body_classは、他にもページの情報を確認したい時にも役に立つタグです。

bodyタグはhtmlが記述してある<body>タグ中に挿入するタグです。

それでは実際にタグを挿入しましょう

15行目の<body>タグの中に　<?php body_class(); ?>　を挿入します。

before <body>

After <body <?php body_class(); ?> >

※このページにだけCSSを適応させたい時は、

例・・・　.home(セレクタ名){(このペーシだけのルール)}

上記のような感じでCSSを反映させることができます。

header.phpの</head>タグを編集する

<head>と<footer>はwordpressのコアやプラグインと密接な関係があり、

ある特定のcssファイルやjsファイルを読み込むのに使ったり、何かの動作をするのタイミングとして使われたり、メタタグを吐き出すのに使われていますので<head><footer>がなければwordpressはうまく動作されないといわれてます。

それでは、14行目の</head>の直前に　<?php wp_head(); ?>　を挿入しましょう

挿入後は以下の画像のようになります。

footer.phpのどこかにタグを挿入する

次に　<?php wp_footer(); ?>　を以下のように<body>～</body>の間に入れて保存してみましょう。

すると以下のようにwordpressの管理バーがでてきて、wordpressらしくなりましたね。

ループ処理

wordpressの記事の全てはデータベースに保存されていて、テンプレート内ではデーターベースから読み込まれた記事を展開してから出力します。

その際データベースから記事を取得するのがループ処理です。

page/php index.phpなどほとんどのテンプレートに必要です。

以下のコードはwordpressの基本となるループのコードで

WordPress Codex 日本語版にあります。

<?php
         if(have_posts()){
                 while(have_posts()){
                       the_post();
?>
//ここにhtmlの記事が書いてあります
//
<?php
                }//end while
         }//end if
?>

<?php

if(have_posts()){

while(have_posts()){

the_post();

//ここにhtmlの記事が書いてあります

<?php

}//end while

}//end if

index.phpにループを記述する

それでは、index.phpにループ処理を記述をしましょう。

Atomを開いてindex.phpを開きましょう!

まずindex.php内のhtmlを探します。

htmlの上に

<?php
         if(have_posts()){
                 while(have_posts()){
                       the_post();
?>

<?php

if(have_posts()){

while(have_posts()){

the_post();

htmlの下に

<?php
                }//end while
         }//end if
?>

<?php

}//end while

}//end if

を挿入します。

挿入後のサンプルは以下の通りです。

次にhtmlタグをテンプレートタグに置き換えていきます。

テンプレートタグのコードはこちらを参考にしてください。

まず<h2>製作者より</h2>のところはタイトルになりますので以下のように書き換えます。

<h2><?php the_title(); ?></h2>

次に11行目の<h3>から19行目の</p>タグまでは記事の中のマークアップになりますので全て削除しwordpress本文を吐き出すテンプレートタグに書き換えます。

タグは以下のタグです。

<?php the_content(); ?>

それでは、保存してリロードして見てみましょう!!

以下の画像のように新着情報・サービス・アクセスなどをクリックしたときに始めの段階で、ダミーの内容で記入した文字が出力されていればOKです。

次回は、ウィジェットとカスタムメニューに対応させていきたいと思います。

役に立ったら共有してね

2018年6月18日2018年6月18日

無料のHTML・CSSテンプレートをWordPress化する方法No.3(パスの書き換え)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版（10/8.1/8/7 64-bit）
MAMP:4.0.1
Atom:1.27.2

パスの書き換え

サイト内リンクの書き換え

/insex.htmlのようになっているのを

http;//〇〇.com/about/

のようなフルパスに記述し直す必要があります。赤文字の部分を吐き出すために以下のようなwordpressのコマンドを使います。

<?php bloginfo(‘url’); ?>

※ドメインルートに展開している場合など書き直し不要な場合があります。

header.phpにタグを挿入する

Atomでheader.phpを開きます。

19行目にある<a href=”index.html“>はサイト内リンクですので、index.htmlの文字を削除して<?php echo home_url(); ?>を挿入します。

<a href=”<?php echo home_url(); ?>”>　になります。

次に26行目の

<a href=”index.html“><img src=”<?php echo get_template_directory_uri();?>/images/btn_access.gif” alt=”お問い合わせ” class=”rollover” /></a>

はまず、index.htmlを削除し<?php echo home_url(); ?>/contact/

を挿入してください。固定ペーシのパーマリンクで設定したスラッグが入ります。

33行目の<a href=”index.html“>ホーム</a>

はindex.htmlを削除して<?php echo home_url(); ?>を挿入します

34行目の<a href=”sample.html“>新着情報</a>は

お問い合わせのときと同じように、スラッグが入りますので

となります。

35行目の<a href=”index.html“>サービス・設備</a>

のスラッグはservise-facilityで設定してますので

<a href=”<?php echo home_url(); ?>/servise-facility/”>サービス・設備</a>

となります。

36行目の<a href=”index.html“>客室・料金</a>

のスラッグはroom-priceで設定していますので

<a href=”<?php echo home_url(); ?>/room-price/”>客室・料金</a>

となります。

37行目の<a href=”index.html“>料理</a>

のスラッグはfoodで設定していますので

となります。

38行目の<a href=”index.html“>アクセス</a>

のスラッグはaccessで設定していますので

<a href=”<?php echo home_url(); ?>/access/>アクセス</a>

となります。

最終的には以下の画像のようになります。

index.phpにタグを挿入する

前回同様、以下のindex.htmlを削除し　<?php echo home_url();?>　を挿入します。

4行目<a href=”index.html“>HOME</a>　は

<a href=”<?php echo home_url(); ?>”>HOME</a>　となります。

13行目<a href=”index.html“>» インデックスページに戻る</a>　は

<a href=”<?php echo home_url(); ?>”>» インデックスページに戻る</a>　となります。

sidebar.phpにタグを挿入する

今度は、sidebar.phpの書き換えをしていきます。

書き替えをするのはaタグ内のindex.htmlを削除し以下のコードにスラッグを付与して書き換えましょう。

<?php echo home_url(); ?>/スラッグ/

以下の画像は書き換え前の画像です。

今回書き換えるのは以下のコードです。

5行目　<a href=”index.html“>インターネット</a>　スラッグは　internet
6行目　<a href=”index.html“>温泉</a>　　　　　　スラッグは　hot-spring
7行目　<a href=”index.html“>ラウンジ</a>　　　　スラッグは　lounge
13行目　<a href=”index.html“>マッサージ</a>　　スラッグは massage
14行目　<a href=”index.html“>エステ</a> スラッグは　 beauty

書き替え後のサンプルは以下の画像のようになります。

次回はwordpressで必須なダグとループ処理について解説します。

役に立ったら共有してね

月別: 2018年6月

近くで足湯カフェをお探しならおかみの足湯

料金

カフェ

営業時間

無料のHTML・CSSテンプレートをWordPress化する方法No.6(タイトルタグの自動認識・ぱんくずリスト/ページ送りの実装)

タイトルタグとディスクリプションの変更

タイトルタグの変更

ディスクリプションの変更

titleタグの削除

パングズリストの対応

新着情報の実装

ページ送りの実装

無料のHTML・CSSテンプレートをWordPress化する方法No.5(ウィジェットとカスタムメニューを追加する)

ウイジェツトに対応させる

カスタムメニューに対応させる

無料のHTML・CSSテンプレートをWordPress化する方法No.4(必須ダグとループ処理)

WordPress必須タグを挿入する

header.phpの<body>タグを編集する

header.phpの</head>タグを編集する

footer.phpのどこかにタグを挿入する

ループ処理

無料のHTML・CSSテンプレートをWordPress化する方法No.3(パスの書き換え)

パスの書き換え

関連ファイル等のパスの書き換え

header.phpにタグを挿入する

top.phpにタグを挿入する

サイト内リンクの書き換え

header.phpにタグを挿入する

index.phpにタグを挿入する

sidebar.phpにタグを挿入する