月別: 2015年7月

wordpress 一覧ページの作成

まずはカテゴリを作成する

ダッシュボードの投稿 > カテゴリー
で
新規カテゴリに任意のカテゴリ名を入れ
新規カテゴリを追加
をクリック

今回はサイトで使用するので
カテゴリに
和食
洋食
中華
スイーツ
ラーメン
を追加

次にカテゴリIDをしらべたいので　
ダッシュボードの
設定 > パーマリンク設定
で
デフォルト
をクリック

これでURL にカテゴリのIDが表示される

次に
投稿 > カテゴリで
今回追加したカテゴリを選び
表示をクリック

これで表示される
http://dev.dotinstall.com/wordpress/?cat=8
というように
最後の
?cat=8 という部分がカテゴリIDになる

これを後々使うのでメモしておく

和食 　　
http://dev.dotinstall.com/wordpress/?cat=5

洋食
http://dev.dotinstall.com/wordpress/?cat=6

中華
http://dev.dotinstall.com/wordpress/?cat=7

スイーツ　
http://dev.dotinstall.com/wordpress/?cat=8

ラーメン　
http://dev.dotinstall.com/wordpress/?cat=9

なおこれは私の環境の場合で
他の環境では変わるので注意

次に固定ページの作成
テンプレート作成に関しては
各固定ページのページデザインをテンプレート選択で可能にする方法

を参考に

まずは固定ページを新規作成

ダッシュボードで
固定ページ > 新規追加
で
お店一覧
として公開

このときにページIDを確認しておきます

今回の場合
http://dev.dotinstall.com/wordpress/?page_id=35
で
id は３５です

次に固定ページテンプレートを作成します

まずはベースとなるファイルをコピーして
page.php を作成します

今回は以前一覧を表示した sweet.html から作成します

cp ~/wpt/sweet.html page.php

次にファイルの中身をwordpress の
ヘッダーとフッターにかえます

ヘッダー読み込みは

<?php get_header(); ?>
[/php

フッター読み込みは

?php get_footer(); ?>

で行います

これでまず一覧表示画面ができました

今回のソースは

<?php get_header();?>
<form action="" class="ui-filterable">
  <input type="text" id="keywd" data-type="search" placeholder="お店の名前を入力
">
</form>

  <ul data-role="listview" data-filter="true" data-input="#keywd">
    <li class="ui-li-has-thumbnail"><a href="shop.html"><img src="image/tee.jpg"  />お茶</a></li>
    <li class="ui-li-has-thumbnail"><a href="shop.html"><img src="image/cake.jpg"  />ケーキ</a></li>
    <li class="ui-li-has-thumbnail"><a href="shop.html"><img src="image/food.jpg"  />和菓子</a></li>
    <li class="ui-li-has-thumbnail"><a href="shop.html"><img src="image/cofee.jpg"  />ゼリー</a></li>
    <li class="ui-li-has-thumbnail"><a href="shop.html"><img src="image/blead.jpg"  />アイス</a></li>
  </ul>
<?php get_footer(); ?>

となります

アーカイブの中からファイル抜き出し

tar コマンドで固めたファイルは
解凍しなくてもディレクトリ構造をみることができる

例えば

sudo tar zcvf etc.tar.gz /etc/

で
/etc/ 以下を
etc.tar.gz 以下に固め
この中身の一覧を見るのなら
tオプションをつかう

tar ztvf etc.tar.gz |head -n5

で
一覧の中から５つだけ表示
結果は

drwxr-xr-x root/root         0 2015-07-29 20:37 etc/
-rw-r--r-- root/root       233 2010-01-12 22:28 etc/printcap
lrwxrwxrwx root/root         0 2015-01-12 18:34 etc/rc3.d -> rc.d/rc3.d
-rw-r--r-- root/root        58 2014-11-04 21:17 etc/networks
-rw-r--r-- root/root       158 2010-01-12 22:28 etc/hosts

となる

今度は、ファイルそのものを指定
ただし、一覧を指定しているのでファイル情報がでて
中身の表示ではない
本来は、ディレクトリなどを対象にして一覧をみるのにつかう

tar ztvf etc.tar.gz etc/networks

結果は

-rw-r--r-- root/root        58 2014-11-04 21:17 etc/networks

次に中身の取り出し
これは　xオプションをつかう

tar zxvf etc.tar.gz etc/networks

とすると
etc というフォルダができ
その中に networks ファイルが入っている

ネットでよくみかけるtar の展開はほとんどこのタイプ

また、取り出さなくても
-O をつけることでファイルの中身をみることができる

tar zxvf etc.tar.gz etc/networks -O 

とすれば

etc/networks
default 0.0.0.0
loopback 127.0.0.0
link-local 169.254.0.0

というように閲覧可能

この圧縮ファイルの中身をみるのは
zip 形式のものでもできる

例えば、過去に取得した wordpress
の圧縮ファイルの
latest-ja.zip

この中身をみるため、ファイル一覧を調べる
vオプションで詳細をみれる

今回は、数が多いので
head -n10
をつけて絞っている

unzip -v latest-ja.zip | head -n10

結果は

Archive:  latest-ja.zip
 Length   Method    Size  Cmpr    Date    Time   CRC-32   Name
--------  ------  ------- ---- ---------- ----- --------  ----
       0  Stored        0   0% 02-19-2015 23:24 00000000  wordpress/
    8252  Defl:X     2979  64% 07-17-2014 18:12 5aa29ac6  wordpress/wp-mail.php
    2714  Defl:X     1217  55% 07-08-2014 01:42 96436a4e  wordpress/wp-load.php
       0  Stored        0   0% 02-19-2015 23:24 00000000  wordpress/wp-content/
       0  Stored        0   0% 02-19-2015 23:24 00000000  wordpress/wp-content/themes/
      28  Stored       28   0% 06-06-2014 00:59 fb11104a  wordpress/wp-content/themes/index.php
       0  Stored        0   0% 02-19-2015 23:24 00000000  wordpress/wp-content/themes/twentyfourteen/

となる

この中から
wordpress/wp-content/themes/index.php

の中身を表示するには pオプションをつかう

unzip -p latest-ja.zip wordpress/wp-content/themes/index.php


を実行すると

<?php

// Silence is golden.

という結果になる

wordpress プラグインのコピー

vagrant 環境に wordpress を構築したので
いままで使っていたプラグインを引越し

 cd /var/www/html/wordpress/wp-content/plugins/

で
wordpress を配置したディレクトリにある
wp-content/plugins/
へコピーする

sudo  scp -rp snowpool@192.168.10.249:/var/www/html/wpt/wordpress/wp-content/plugins/* .

でコピー

なお、コピーはされるけど、有効化はされないため
ダッシュボードから有効化する必要があるので注意

圧縮ファイルの操作

Linux の場合、圧縮ファイルのまま
端末から操作ができる

このため解凍する手間が省ける

圧縮展開でよく使われるのは
tar コマンド

これについては
【 tar 】 ファイルを書庫化・展開する（拡張子.tarなど）

を参考に

これ以外にも１つのファイルを圧縮することもある

今回も書籍を参考にしながら実践

今回は seq コマンドをつかう

いつもの日経Linux のコマンドには載っていないため
seq コマンドで検索

seq – 連続した数字の列を出力・表示 – Linuxコマンド

を参考に行うことに

書籍だと大きいサイズのファイルを作るけど、私のマシンでは無理なので

seq 1 1000000 > hoge

で
１から1000000 の数を書いた hoge ファイルを作成

容量を見るには lsコマンドをつかう

詳細なオプションについては
【 ls 】 ファイルやディレクトリの情報を表示する

を参考に

今回は容量も見やすくするたm
hオプションを使用

ls -lh hoge

結果は

-rw-rw-r--. 1 vagrant vagrant 6.6M  7月 28 06:43 2015 hoge

となる

これを gzip コマンドで圧縮

詳細については

【 gzip 】 ファイルを圧縮・展開する（拡張子.gz）

を参考に

今回はオプションなしで圧縮

gzip hoge

これでサイズを確認

ls -lh hoge.gz 

結果は

-rw-rw-r--. 1 vagrant vagrant 2.1M  7月 28 06:43 2015 hoge.gz

となり hoge ファイルは圧縮されなくなる

この圧縮ファイルは解凍せずに

そのままつかうことができる

これには zcat コマンドをつかう

詳細については

【 zcat 】 gzipやcompressで圧縮されたファイルの内容を表示する

を参考に

今回圧縮した hoge.gz の中身をみるには

zcat hoge.gz | head -n5

とする

結果は

1
2
3
4
5

となる

また、zgrep コマンドをつかうことで
圧縮ファイルの中身を検索することもできる

zgrep コマンドについては
よく使うLinuxコマンドメモ

を参考に

今回の hoge.gz から 10000 を検索するなら

zgrep 100000 hoge.gz 

となる

結果は

100000
1000000

古いファイルを上書きしないように同期

この場合、rsync コマンドの
-u オプションをつかう

本来は、２つのマシンでやる予定だったけど
用意できなかったので、今回はローカルで実践

rsync コマンドについては

rsync – 高速なファイル同期（バックアップ） – Linuxコマンド

を参考に

まずはテストディレクトリを作成して実験

mkdir test

次にサンプルを書籍のものをつかうことに

cp -rp ~/GihyoShellBookSamples-master/chapter3/事務 .

もう一つ作成したディレクトリにもコピー

cd test
cp -rp ~/GihyoShellBookSamples-master/chapter3/事務 .

これで準備ok

cd
vim 事務/厄介な仕事.txt 

でファイルを編集し
１行目末尾に done を追加

その後、rsync で同期する

rsync -av 事務/ test/事務/

これで同期するけど
このとき間違えて
test 側から同期するとデータが古くなってしまう

rsync -av test/事務/ 事務/

となってしまうとデータが古くなる

この対策として
-u オプションをつける
これをつけることで
タイムスタンプを比較し
新しいものを残すようになる

rsync -avu test/事務/ 事務/

これで更新したファイルだけ同期になる

なお、これだけだと、test のほうは古いままなので

rsync -avu 事務/ test/事務/
cat test/事務/厄介な仕事.txt

というように相互に行えば
更新したファイルを相互に同期することができる

注意点は、ファイルの変更の有無ではなく
タイムスタンプなので
ファイルを開いて保存するだけでも対象になってしまうこと

今回はローカルでのファイルだけど
これをリモートマシンでやれば
簡易バックアップができる

ほかのマシンと同期

ほとんどの場合ssh 接続がデフォルトなので
通常は sshを明示的にしなくてもいい

手元の Music ファイルを
リモート先と同期するのなら

rsync -av Music/ developapp.net:~/Music/

というようにする

もしIP指定で、逆に自分の新規インストールマシンに
音楽を同期させたいのなら

rsync -av 192.168.10.248:~/Music/ ~/Music/

とすればいい

もし、ユーザが違うのなら

rsync -av snow@192.168.10.248:~/Music/ ~/Music/

となる

あと、講習とかで ssh を変更したのなら
zオプションで通信を圧縮

そして
rsyncの使い方（オプション SSH）

にあるように
-e オプションをつかうことで暗号化してファイル転送します

もし 222 番にしたのなら

rsync -avz -e ‘ssh -p 2222’ ~/Download/ snowpool@191.168.10.248:~/Download/

とすればいい

rsync コマンドでシンボリックリンクを扱うには

rsync コマンドで
シンボリックリンクを同期するには
-lオプションでシンボリックリンクをそのままコピーする
もしくは
-a オプションですべてコピーする

試しに ln コマンドでシンボリックリンクを作成

lnコマンドの詳細は
【 ln 】 ファイルやディレクトリにリンクを張る
を参考に

ln -s /etc/ link

で/etc/のシンボリックリンク link を作成

-s オプションはシンボリックリンクを
作成するオプション

次に rsync コマンドで同期

sudo rsync -av ~/ /var/tmp/

rsyncコマンドの詳細は
rsync – 高速なファイル同期（バックアップ） – Linuxコマンド

を参考に

a オプションで属性をコピー
v オプションでログ出力

終わったら、ls コマンドで調べる

ls コマンドの詳細は
【 ls 】 ファイルやディレクトリの情報を表示する

を参考に

今回使用するオプションは
-l オプションでファイルの詳細表示
-d オプションで
ディレクトリを含んでいてもファイルみたいに表示

ls -ld /var/tmp/link

と

ls -ld link

の結果は

lrwxrwxrwx. 1 vagrant vagrant 5  7月 27 09:10 2015 /var/tmp/link -> /etc/

と

lrwxrwxrwx. 1 vagrant vagrant 5  7月 27 09:10 2015 link -> /etc/

というように同じになる

ディレクトリの同期

同期には
rsync コマンドを使用

詳しくは
rsync – 高速なファイル同期（バックアップ） – Linuxコマンド
を参考に

今回は /home/vagrant/以下を
/var/tmp/　へコピー

rsync -av /home/vagrant/ /var/tmp/

オプションの
a　はファイル属性をそのままコピー
v はファイルのログ出力になります

コピーしたときに同じになるので

ll /home/vagrant/ | head -n5

と

ll /var/tmp/|head -n5

の実行結果は同じになる

ちなみに、コピーするときに
/home/vagrant
と
/home/vagrant/
では意味が変わる
最後の / がないと、ディレクトリごと
コピーしてしまう

nao,rsync コマンドは
変更のあったファイルや新規ファイルなど
変化のあったものだけを同期する
つまり差分バックアップみたいなかんじ
なので
２回目は時間短縮できる

実際の時間を計るため
time コマンドを使い計測

timeコマンドの詳細は
【 time 】 指定したコマンドの実行時間を表示する
を参考に

実行するコマンドは

time rsync -av /home/vagrant/ /var/tmp/

1回目の結果は

real	0m2.055s
user	0m0.538s
sys	0m1.111s

2回目の結果は

real	0m0.422s
user	0m0.065s
sys	0m0.228s

というようにかなり短縮される

注意点は、少しでも変化があれば
同期対象にしてしまう

これは仮想マシンなど
GB単位のファイルで行われることになる

あと、スクリプトで実行するときなど
/etc/ のように
sudo がないと同期できないものもあるので注意

投稿記事にスライドショーの追加

画像スライダーをつけるには
Meta Slider
プラグインを使います

本来なら撮影した写真を使うのですが
今回は実験
とはいっても最初から素材を用意するのは大変なので
無料写真素材サイト
FOODIE’S FEED

のものを使わせていただくことにします

なお、本来は、カスタム投稿でアップロードしたものを
使う予定でしたが、方法がわからないため
プラグインと投稿ごと行うことになります

まずは
Meta Slider
をインストールします

ダッシュボード > プラグイン >
新規追加で
Meta Slider
で検索し、インストールと有効化を行います

するとダッシュボードに
Meta Slider という項目ができるので
これをクリックし、
最初のスライドショーを作成するため
＋ボタンをクリックします

名前が新規スライダーだとわかりにくいので
sweet に変更し、スライドを追加をクリック

ファイルアップロード画面になるので
ダウンロードしておいたファイルを選択します

なお、アップロードするサイズが大きいとエラーがでます

初期設定では２MBなので
変更しないとほぼ無理だと思います

今回は Ubuntu 14.04 での設定変更です
方法は２つあり
php.ini を変更する
もしくは
.htaccess での設定になります

今回はphp.ini の変更にします

sudo vim /etc/php5/apache2/php.ini 

で設定ファイルを開き

/post_max
で検索

６７３行目ぐらいに

post_max_size = 8M

があるので

post_max_size = 2000M

に変更

次に、
/upload_max
で検索し
８０５行目あたりの

upload_max_filesize = 2M

を

upload_max_filesize = 2000M

に変更

これで２GBまでアップできます

設定できたら

sudo service apache2 restart

で apache2 を再起動

もう一度アップロードすると成功します

アップロードが完了すると
一覧ができるので
保存をクリックします

次に、投稿記事に挿入していきます

テストとして
ダッシュボードの投稿から
Hello world を選びます

モードをビジュアルからテキストに変更し
スライダーを追加
をクリックします

どれを追加するか選ぶ画面になりますが
今回は１つしかないので
そのまま
Insert slideshow
をクリックします

すると、

[metaslider id=16]
というように
ショートコードが挿入されます

これで投稿にスライダーが追加されます

今回は記事の下へ追加しましたが
場所を変更することで
投稿内の好きな場所へ配置することができます

なお、今回の変更で不要になるギャラリー部分は削除しますので

<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">

を削除します

これでソースは

<?php get_header(); ?>

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

  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
  <h3><?php echo post_custom("Impression")?></h3>
  <?php endif;?>
  <?php the_content(); ?>
  <img src="image/tee.jpg" alt="" width="300" height="300">

  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>
<?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>営業時間</th>
        <th>ランチ価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><?php echo post_custom("ShopName")?></td>
        <td><?php echo post_custom("Holiday")?></td>
        <td><?php echo post_custom("Time")?></td>
        <td><?php echo post_custom("lunch")?></td>
        <td><?php echo post_custom("Address")?></td>
        <td><?php echo post_custom("tel")?></td>
        <td><?php echo post_custom("Hp")?></td>
        <td><?php echo post_custom("Access")?></td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
<?php
    $map = esc_html(get_post_meta($post->ID,"Address",true));

    echo do_shortcode('[map addr="'.$map.'" height="400px" zoom="16"]');
 ?>
  <?php endif;?>

  <?php endwhile;   else: ?>
    <p>記事はありません</p>
  <?php endif; ?>


<?php get_footer(); ?>

となります

Google Map を埋め込む wordpress プラグイン

現在の状態だと

  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

となっているため地図が固定されています

これを投稿したお店の場所に変えてみます

今回は Google Map を埋め込めるプラグインを使います

ダッシュボード > プラグイン >新規追加
で
Simple Map を検索し
インストールして有効化します

なお、 Simple Map を
投稿記事内に使いたい場合は
Google Mapを埋め込むWordPressプラグイン「Simple Map」の使い方

を参考に

今回は、テーマファイルに埋め込み
カスタムフィールドの値を元に Map を出します

この場合、
カスタムフィールドで入力した住所を変数に格納し
それを
do_shortcode() で表示します

なお、カスタムフィールドの値を取得し
変数にいれるときには
esc_html() でエスケープします

esc_html() については
WordPressでechoする文字を適切にエスケープする

の解説を参考に

今回、取得するカスタムフィールドの値は
Address になります

[解決済み] 投稿ページから記事ごとに地図を表示したい
と
カスタムフィールドに住所を入れてgoogle mapsを表示する
を参考に
テンプレートファイルの single.php に埋め込みました

まず、カスタムフィールドで入力した住所を
変数に入れます

$map = esc_html(get_post_meta($post->ID,"Address",true));

Adress は、カスタムフィールドで設定したIDです

次に、地図の表示です
決め打ちで表示するのなら

<?php echo do_shortcode('[map addr="東京都千代田区永田町1-7"]'); ?>

とすれば表示されます

構文は
[map addr=”住所”]
となります

住所は　変数 $map に格納しているので

echo do_shortcode('[map addr="'.$map.'"]');

で表示できます

これで地図も記事ごとに表示できるようになりました

今回の変更により以下のコードになります

<?php get_header(); ?>

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

  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
  <h3><?php echo post_custom("Impression")?></h3>
  <?php endif;?>
  <?php the_content(); ?>
  <img src="image/tee.jpg" alt="" width="300" height="300">

<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">

  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>
<?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>営業時間</th>
        <th>ランチ価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><?php echo post_custom("ShopName")?></td>
        <td><?php echo post_custom("Holiday")?></td>
        <td><?php echo post_custom("Time")?></td>
        <td><?php echo post_custom("lunch")?></td>
        <td><?php echo post_custom("Address")?></td>
        <td><?php echo post_custom("tel")?></td>
        <td><?php echo post_custom("Hp")?></td>
        <td><?php echo post_custom("Access")?></td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
<?php
    $map = esc_html(get_post_meta($post->ID,"Address",true));
    
    echo do_shortcode('[map addr="'.$map.'"]');
 ?>
  <?php endif;?>

  <?php endwhile;   else: ?>
    <p>記事はありません</p>
  <?php endif; ?>


<?php get_footer(); ?>