第10回ワードプレスレッスン

早いものでワードプレスレッスン受講は第10回を迎えました。

ワードプレスの設置をはなれて「ワードプレスをどう使うか」「どう役立てるか」という授業内容になってきました。

紙のレッスンノートから取り出す必要のあるメモを掘りおこしたいと思います。

「スナップマート」で写真を購入する

写真がどうしても入手できず困っている場合には、有料サービスで購入するのがてっとり早いそうです。

「スマップマート」というサービスを教えてもらいました。

https://snapmart.jp

子テーマでの設定変更がきかないときには？

わたしがカスタマイズに挫折したワードプレステーマ「one tone」は、p { color: red; }を書き加えても、文字色が「赤」になりませんでした。

どの.classを入れてもだめでした（5種類くらい）

フォルダ構成がいっぱんのワードプレステーマとは違っていて、少し手入れが必要だったようです。

php先生が「onetone」の子テーマをあらたに作ってくださいました。

まだその中身を見ていないのですが、おそらく「function.php」ファイルの記載を一部かきかえたのではないかと予想します。

時間があるときphpプログラムコードを見比べてみたいと思います^^。

あたらしい子テーマの名前は？

「onetonechildtheme」というフォルダ名です。

中の「style.css」内にも、子テーマ名は「onetonechildtheme」だよ、と書かれてありました。（スペースキーで単語区切りあり）

子テーマをアップし、「テーマの編集」にcss指定を書き入れたら、文字サイズなど変更できました！

p { font-size:18px; line-height: 2;}

#menu-main li a { font-size: 16px; }

.site-tagline { line-height: 3.0 ;}

span { font-size: 16px; }

「span」全体で文字サイズを指定したのが、これでベストなのかどうか不安なやり方です。

ブログのサブタイトル（タイトル下：〜〜なブログです、の文）がspanタグでかこまれて文字サイズ指定ができませんでした。

.classで指定できないので、span全体に「大きくして」とかけてしまったんです。

30pxなどではないから邪魔にならないとは思うのですが。（どこもかしこも16pxくらい）

不具合あるようなら、対応策をかんがえます。

サブタイトルを下に下げたい（タイトルと幅をあけたい）のは「行間3.0）という指定できかせました。

margin paddingがうまくいかなかったので（管理画面のどこかに設定欄があるのでしょう）

「!impoetant」で優先度をあげることはできるのですが

管理画面での指示が最終指定となり、子テーマに書き込んでもうまく反映されません。

ところが「!impoetant」とつけると、優先度をあげて反映してくれるようです。

例：

body {
background-color: pink !important;
color: #333333 !important;
}

css（スタイルシート）の原則では、インポータントは連発すべきではありません。

でもどうしても子テーマ内の編集できかせたい場合の裏技ではあります。

・管理画面にあるのはそこで文字色、フォント（字体）など指定

・管理画面にないのは「子テーマ」内で指定

このように場を使い分けてデザインしていきます。

メールフォーム「contact form7」で「メールアドレス確認欄」（2つめ）をつくりたい

phpプログラムの追加が必要でしたので、php専門の先生にならっていて本当によかったと思っています。

メールアドレス「確認」の行をたしていきます。

表面上のフォームには2行分書き足します

下記をコピペして

<label> メールアドレス (必須)
[email* your-email] </label>

その下に貼り

<label> メールアドレス (必須)
[email* your-email] </label>

<label> メールアドレス (確認)
[email* your-email_confirm]</label>

（必須）を確認に

「_confirm」かきたします　[email* your-email_confirm]

emailのあとの「*」を忘れないようにします。

「2欄が同一アドレスだったら送信します」のphpコードを加えます

外観＞テーマの編集をひらきます

いつもは「style.css」をいじっていますが、今回は右側にあるテーマのための関数「functions.php」に書きくわえます。

<?php ……. ?>で

?>　の手前に　（….. と ?> の間）

下記をぜんぶコピペして入れ込みます。そして保存。

function wpcf7_main_validation_filter( $result, $tag ) {
$type = $tag[‘type’];
$name = $tag[‘name’];
$_POST[$name] = trim( strtr( (string) $_POST[$name], “\n”, ” ” ) );
if ( ‘email’ == $type || ‘email*’ == $type ) {
if (preg_match(‘/(.*)_confirm$/’, $name, $matches)){
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
if (method_exists($result, ‘invalidate’)) {
$result->invalidate( $tag,”確認用のメールアドレスが一致していません”);
} else {
$result[‘valid’] = false;
$result[‘reason’][$name] = ‘確認用のメールアドレスが一致していません’;
}
}
}
}
return $result;
}

add_filter( ‘wpcf7_validate_email’, ‘wpcf7_main_validation_filter’, 11, 2 );
add_filter( ‘wpcf7_validate_email*’, ‘wpcf7_main_validation_filter’, 11, 2 );