第7回ワードプレスレッスン(2018.1-4)

録画の始まりは「ワードプレスサイトが攻撃されるってどういうこと!?」のお返事でした。

クラウドソーシングの案件で「ワードプレスが攻撃されました。使えなくて困ってます」という相談を見かけたことがありました。

何がどう攻撃されて、どうやって直したのか、話が見えないので、質問してみたのです。

答え

・メールフォームなどから入力した情報がぬすまれる。アドレス流出

・ワードプレスのパスワードが盗まれる

管理画面に入られて、パスワードを勝手に変更されてしまう

それだけなら自分で新たなパスワード発行でいいのですが「登録メールアドレス」ごと知らない別のに変えられてしまう。

そうすると「持ち主本人」もワードプレスダッシュボードに入れなくなる。

ワードプレス「乗っ取り」被害にあう。

記事内容、いろんな設定も勝手にへんなのに書きかえられてしまう。

対応法

・バックアップを取っていたらそれを使ってログ(記事・画像・テーマなど設定)などを復活させる

・サーバーに新しいワードプレスをつくりなおして、そこにバックアップを入れる形となる

使っていたドメインは、ムームードメインやお名前コム側、サーバー側から「今度はこっちのワードプレスサイトにつないでね」と指定できるはず。

・バックアップを取っていない場合、空っぽのワードプレスサイトでイチからやり直すしかないのではと。

ダッシュボードに入れないのですから。

結論

そのためには「バックアップ」を定期的にしっかり取っておきましょう!

たとえ9割でもきちんと復元できるかどうか、最新記事2つ3つ欠けてるだけとかなら、全然ちがってきます。

*クレジット情報について

サーバー内部で保存しないのでワードプレス攻撃とは関係ない、問題ない。

シューズサイト販売などですと「顧客情報」「カード番号」を入力するけど、その情報は「暗号化」されてクレジット会社へ届く

クレジットカード会社をはさんで承認するから、サイトの方を攻撃されても顧客情報(メール、住所、カード番号)などは問題にならない

話が別です

要件定義をつくりましょう

ソフト開発のときなど「要件定義」をきめます。

別記事でまとめました

サイトつくるだけでもこれだけ必要です

要件定義

・wordpressでいいか?
・固定ページ数
・ブログ機能は必要か?
・テンプレートは無料・有料か?
・追加機能は必要か?(お問い合わせ機能など)
・写真やイラストなどの素材はどちらが提供するか?
・ドメイン、サーバーはどちらが管理するか?
・デザイン 詳細はどちらが準備するか?
・httpsが必要か否か?
・SEO関連(アナリティクス、サーチコンソールの設定必要か?)

ワードプレス前提がやりやすいです

話とびますが

グーグルアナリティクス・サーチコンソールの違いについて

まず私自身がですが

・グーグルアナリティクス 2017年まで使ってましたが、オーガニック検索のワードが「not provided」だらけになり見なくなった。

・ライター納品している発注者さんに「サーチコンソール」を見れるようにしてもらい、検索されるワード(「スプラッシュマウンテン 怖い 克服」など)を見れるようにしてある

2018年現在こんな状態です

グーグルアナリティクスの方がより詳細なユーザーの動きが見えます。

年齢性別

クリックイベント バナーをクリックされた回数など(ぶ厚い本に書いてある)

イベントトラッキング

(ゲタはぐのをやめましょう。収集つかなくなるかも!?)

<28:00 確認事項2かな グーグルアドセンス 審査し直さなくていいの?>

<32:00 301リダイレクトの指示をだしてあげる話 わかんないドメイン放置のこと>

写真などバックアップの取り方(その2)

ドロップボックスにバックアップをとる方法を教えてもらいました

「アマゾンウェブサービス」という方法もあるそうです!

調べて「別記事」にまとめました。

<41:00 確認事項4 アマゾンウェブサービスの記事をかく>

と思ったけど「設定がめんどう」なのでやめました

マイクロソフト社にもそれと同じようなクラウドサービスがあるそうです

「キャッシュ系プラグイン」の選び方

WordPressキャッシュプラグインを選ぶために知っておくべきこと

 

1枚30MBなどまで写真OKになる

ワードプレス編集権限いろいろ

 

「寄稿者」がよい

「管理者」の次(編集者)などはやめておく

編集者は記事を書き換えたり消したりできるので

「寄稿者」のサンプルコード

子テーマの`functions.php` にこれを追記

コードいくつか

//寄稿者用
if ( current_user_can(‘contributor’) && !current_user_can(‘upload_files’) ){
add_action(‘admin_init’, ‘allow_contributor_uploads’);
}

function allow_contributor_uploads() {
$contributor = get_role(‘contributor’);
$contributor->add_cap(‘upload_files’);
}

//寄稿者からのレビュー依頼
function mail_for_pending( $new_status, $old_status, $post ) {
// 投稿がレビュー待ち以外からレビュー待ちに変わった(新規の場合は$old_statusが’new’、$new_statusが’pending’になります)
if ( $old_status != ‘pending’ && $new_status == ‘pending’ ) {
// ブログ名(サイト名)
$blogname = wp_specialchars_decode(get_option(‘blogname’), ENT_QUOTES);
// 投稿名
$post_title = wp_specialchars_decode($post->post_title, ENT_QUOTES);

// 送信先(管理者)
$to = get_option(‘admin_email’);
// 件名
$subject = “[{$blogname}] 承認待ちの投稿が投稿されました({$post_title})”;
// 本文
$message = “承認待ちの投稿「{$post_title}」が投稿されました。確認をお願いします。\r\n”;
$message .= “\r\n”;
$message .= “編集および公開: \r\n”;
$message .= wp_specialchars_decode(get_edit_post_link( $post->ID ), ENT_QUOTES) . “\r\n”;

// メールを送信
$r = wp_mail( $to, $subject, $message );
}
}

寄稿者からでも写真アップとか、寄稿したらメール通知くるとか

「ウェルカート」にはもともと「寄稿者」の機能があった

他のテーマはなかったら上のコードを足す

セレクターを自分で探す

ディベロッパーツール(グーグルクローム)でCSS編集します!

<1:09 CSS編集のやり方 マージンで余白を10px増やす、みたいな>

矢印「スマホマーク」なので、それをおすと「パソコンビュー」にきりかわります。

スマホマークが黒くなったら(解除)左の「マウスポインタボタン」をおして

タイトルをこんな風に指定したりしまして

ソースコードになってないので(現在Elements – Style)

「html」が見たい

1 スマホ表示を解除してPCビューに

2 htmlがみれるようにして

3 <h1 class=”site-title”><a href=”https://〜”>サイトタイトル</a></h1>

となっています

「.site-title」と(ワードプレスの子テーマに)スタイルシート(CSS)に指定します

4 このピアノホームページ(https://niigatawp.com/pianoschool/)のダッシュボード、現在のテーマ(子テーマ:first-child)にいき

5 「 .site-title  {  margin-bottom : 10px; } 」と下に書き込んでみる

*自分で前につくった子テーマの「style.css」に書き足すんです!

しかし反映されていない

.site-titleに反映されるはずなのですが、入ってきていません

タイトル下に10px、余白ができていません

「キャッシュ」を強く消します

「shiftキー+更新ボタン(ぐるっと矢印)」を押すとキャッシュが消えます

すると最新の画面が出たので、先ほどの「 .site-title  {  margin-bottom : 10px; } 」が効いて、タイトル下に10pxの余白ができました!

オレンジ色のところに10px分、あいています。

(右下htmlからはどこなのか見つけられませんでした)

・・・次回はつくるサイトの要件定義、サイト作成が終わってからです

お客さんの要望を聞かないとどんなのを作るかわからない

多少の「手もどり」は仕方ない

無料テーマでじゅうぶん機能しそうです

後日追記

・ディベロッパーツールで「スマホ表示」から抜け出せない場合(PCビューに戻したいとき)

スマホマーク(中央。上の方)をクリックして切り替え

ブルーだとオン(スマホ表示)なのでオフ(黒)にして切る

・ディベロッパーツール上(ブラウザ)では「保存できません」

ワードプレスダッシュボード(管理画面)テーマ>子テーマ編集

.site_title  { ・・・:〜; }

のようにクラス要素の変更内容をかきこんでいきます

htmlの編集も自分で勝手にやってみます

ディベロッパーツールではcssだけでなくhtmlの編集もできそうです

下記を参考にちょっとやってみます

HTMLなんて怖くない?!デベロッパーツールの使い方(Google Chrome編)