備忘録
ペラページでアンカーリンクをつける構成のときは、各セクションのタイトルにpadding-topをつける。リンク先に飛んだときにセクションタイトルがヘッダー下に隠れないようにするため。
中央にコンテンツを寄せるときは基本的にdivでくくってmargin: 0 autoで対応する。padiingだけで対応しないこと。あとから余白の修正が入ったときに修正しやすくするため。
widthを%で指定して可変、レスポンシブ対応するときはmax-width、min-widthをつける。意図しない大きさになるのを防ぐため。
letter-spacingはマイナスを使わない。ブラウザによってはとても見にくくなってしまうため。
自作HTMLをWordPress化する手順
1. style.cssの内容に以下の情報を記載
@charset "UTF-8"; /* Theme Name: テーマ名 Description: This is our original theme. Version:1.0 */
2. 全ての画像のパスを修正
例）サイトロゴの場合
<img src="img/logo.png" alt="サイト名">
↓
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo('name'); ?>">
※ bloginfo('template_url')は非推奨となっているので、echo get_template_directory_uri()を使用する。
2017.9.1 非推奨タグ一覧（bloginfo）
1 <?php bloginfo('stylesheet_url'); ?> 2 <?php bloginfo('stylesheet_directory'); ?> 3 <?php bloginfo('template_url'); ?> 4 <?php bloginfo('template_directory'); ?> 5 <?php bloginfo('url'); ?> 6 <?php bloginfo('wpurl'); ?>
これらはそれぞれ、下記のタグを使うこと。
1 <?php echo get_stylesheet_uri(); ?> 2 <?php echo get_stylesheet_directory_uri(); ?> 3 <?php echo get_template_directory_uri(); ?>//親テーマの場合 4 <?php echo get_stylesheet_directory_uri(); ?>//親テーマの場合 5 <?php echo home_url(); ?> 6 <?php echo site_url(); ?>
コーディング完了後のチェックリスト
head
□ meta、titleの内容に誤りがないか
□ viewportの設定がされているか
□ 不要なlink、scriptが入っていないか
□ UAタグがある場合はリンク先が間違っていないか
body
□ 全てのimgタグに正しいaltが入っているか
□ タグの閉じ忘れなどがないか
□ 誤字脱字がないか
□ font-size、font-familyはデザイン通りに指定されているか
□ 全角・半角は統一されているか
□ リンク切れがないか（テストサーバーで全てのリンク先を確認すること）
その他
□ バリデーターでチェックする https://validator.w3.org/nu/#file
□ chromeの検証機能でエラーがないか確認する
Basic認証
Basic認証とは？
特定の人々にのみwebサイトを公開したい場合などに使う認証機能。IDとパスワードの入力を求めることができる。仲間内で共有したい時や、テストでクライアントにwebサイトを見せる時に便利。
基本的なやり方
1. 「htaccess.txt」という名前でテキストエディター等でファイルを作る。内容は下記をコピペ。
AuthUserFile /home/hogehoge/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user
補足説明
AuthUserfile /フルパス/.htpasswd
サーバーのルートディレクトリからの.htpasswdへのパス。フルパス。（※）
AuthGroupfile /dev/null
グループごとにアクセスを許可する、という指定。「/dev/null」とは、そのようなファイルは存在しないという意味つまりグループごとでのアクセス制限はしないという意味。
AuthName "Please enter your ID and password"
ダイアログに表示される文章を指定。日本語だと文字化けする。
AuthType Basic
AuthTypeを指定。「Basic（ベーシック認証）」と「Digest（ダイジェスト認証）」の2種類がありDigestのほうが安全。
require valid-user
ユーザーが誰であろうと、入力したIDとパスワードが合っていればアクセスできるという意味。特定ユーザーだけにアクセスさせたい場合は「require user xxx」などとする。
※レンタルサーバーのフルパスを調べる方法
テキストエディター等で下記の内容のphpファイルを作成し、サーバーにアップロード。
<? php echo __FILE__; ?>
インターネットで上記のファイルにアクセスすると、ディレクトリまで表示がされる。
2. 「htpasswd.txt」という名前でテキストエディター等でファイルを作る。内容は下記のように、ID:パスワードとする。IDとパスワードは複数指定可能。パスワードは暗号化ツールを使う。
john:joFWnPF2bJhPc
david:daS0keuySWUDg
3. 「htaccess.txt」と「htpasswd.txt」をサーバーへアップロードし、名前をそれぞれ「.htaccess」「.htpasswd」に変更する。
PHP foreach
foreach文で「キー」と「値」を取り出す
foreach ( 配列変数 as キー変数 => 値変数 ) :
実行する処理;
endforeach;
または
foreach ( 配列変数 as キー変数 => 値変数 ){
実行する処理1;
実行する処理2;
}
（例）
<?php
$cat_list = array(
'カテゴリー1' => 2,
'カテゴリー2' => 2,
'カテゴリー3' => 2,
);
foreach ($cat_list as $cat_name => $cat_num) :
$sidebar_posts = new WP_Query('posts_per_page=' . $cat_num . '&category_name=' . $cat_name);
?>
ループ（略）
<?php
wp_reset_postdata();
endforeach;
?>
PHP 配列とは
配列
変数が多く煩雑にならないように配列を使用する。
（例）
<?php
$sunday = '日';
$monday = '月';
：（略）
$saturday = '土';
?>
これを配列で記述すると↓
<?php
$week = array('日','月','火','水','木','金','土');
?>
【配列の書き方】
$配列名 = array('値1','値2','値3';)
【配列の値の呼び出し方】
$配列名[数字] ※この数字を「添字」または「キー」と呼ぶ。
要素の番号は「0」から始まるため、$weekの配列の「月」を呼び出したい場合は$week[2]ではなく$week[1]と指定する。
（例1）
<?php $week = array('日','月','火','水','木','金','土'); ?>
<?php echo $week[4]; ?>
→ 木 と出力される
（例2）
<?php
$img = array(
'500',
'350',
);
?>
<img src="<?php echo $img[0] ?>" width="<?php echo $img[1] ?>" height="<?php echo $img[2]; ?>">
→ <img src="http://example/sample.jpg" width="500" height="350"> と出力される。
連想配列
上記のように配列を数字で管理すると、どの数字が何を示すのかがわかりにくいため、各要素に名前をつけて管理しやすくする。
【連想配列の書き方】
$配列名 = array(
'要素名A' => '値1',
'要素名B' => '値2',
'要素名C' => '値3',
);
※「=>」はダブルアローという。連想配列に要素名（キー）と値を指定するときに使用。比較演算子とは異なるので注意。要素名と値は文字列の扱いになるため、シングルクォート（'）で囲むこと。
【連想配列の呼び出し方】
$配列名['要素名']
（例）
<?php
$img = array(
'url' => 'http://example/sample.jpg',
'width' => '500',
'height' => '350',
);
?>
<img src="<?php echo $img['url'] ?>" width="<?php echo $img['width'] ?>" height="<?php echo $img['height']; ?>">
→ <img src="http://example/sample.jpg" width="500" height="350"> と出力される。
配列に要素を追加する
$配列名[ ] = '値'; ※通常の配列（数字で管理）
$配列名['要素名'] = 値; ※連想配列（要素名で管理）
（例1）
<?php
$week = array('日','月','火','水','木','金');
$week[] = '土'; ※[ ]内に内も記述しなければ、配列の最後に追加される。
?>
→指定された配列の結果としては<?php $week = array('日','月','火','水','木','金','土'); ?>と同様になる。仮に $week[0] = '土'; とした場合は、先頭に「土」が追加されるのではなく「日」が「土」に上書きされてしまう。
（例2）
<?php
$img = array(
'url' => 'http://example/sample.jpg'
);
$img['width'] => 500,
$img['height'] => 350; ※ここは数値なのでシングルクォート（'）は不要。
?>
→$imgの連想配列に 'width' => '500' と 'height' => '350' が追加されたことになる。
