新規設定の手順

わかっている部分だけ。

  1. すべてnoindex設定。
  2. 一旦はコメントオフ設定。
    メールを必須にするか。
    アバター表示設定オフ。
  3. 乗っ取り対策。
  4. パーマリンク設定。
  5. All in One SEO Pack。
  6. テーマ選択。
  7. ウィジェットなど設置。
  8. noarchiveを二重に設定。

最後にnoindex設定を外す。

metaタグの設定

metaタグで有効と思えるものを紹介。
設定は任意で、状況により使い分けたらいいと思う。
「All in One SEO Pack」→「一般設定」→「詳細設定」。
投稿ページや固定ページのヘッダーに、今回はmetaタグを指定してみる、という話である。

なお現投稿時点の「All in One SEO Pack」では、カテゴリーページには指定できないようだ。

ブラウザにキャッシュさせない

ブラウザにキャッシュを残させない方法。
2018年5月現在では以下の二行を併記するのがよいようだ。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

検索結果としてのキャッシュを表示しない

例えば、Google検索結果などでキャッシュ表示されるが、そのキャッシュが古い状態でいつまでも表示される場合がある。
訂正前の記事が検索結果として表示されるのは不本意だろう。
気になる場合は、このキャッシュ表示自体を拒否する事が可能。
なおキャッシュ表示の可不可は、ページ評価とは無関係との事。

<meta name="robots" content="noarchive">

301リダイレクトはもう使わない

リダイレクトで、Googleは301リダイレクトを推奨するという。
これ正直言って納得がいかない。

301リダイレクトキャッシュの削除方法は最下方で説明する。
この記事はサイト運営者に送るもので、一般閲覧者に送るものではない。
しかし単にページ毎にキャッシュを消す方法としても、もちろん有効です。

リダイレクトによるキャッシュ

リダイレクトは自動的にページ転送するという意味で、種類は301や302などがある。
その301リダイレクトの際に、Chromeで閲覧した場合(に限り?)、半恒久的なキャッシュを残す。
このキャシュは、通常のキャッシュ削除の動作では消すことができない。

それは一度301で飛ばすと、その閲覧者に限っては、その元のurlは半永遠的に使えない、ということを意味する。
人様のブラウザに、半恒久的なキャッシュを残す命令は出したくない。
そもそも恒久的な移動なんてあるのだろうか。
Googleの考え方に問題があると思う。

302がおすすめ

urlを変えてくれるな、とGoogleは言ってるのだと思うけど、やり方がはっきりおかしい。
では301以外に方法があるかだが。
聞くとこによると302が使えなくもないという話だ。

  • 302はキャッシュを残さない。
  • 302がページ評価を渡さないというのは昔の話で、今は渡す。
  • 302が長期間続く場合、Googleは勝手に301と解釈するらしい。

302で長期間なら、キャッシュを残さずに同じ効果が得られるという事だと思う。
一応リンクジュースは渡すと言ってるんだから、一定期間は302で、後日古い方を消せば効果があるのでは。

WordPressは自動的にurl変更し移動する機能がある。
WordPressの場合、もしかしたら特別な処理は必要ないのかもしれない。
いずれにせよ、301は使う気しない。
内容が伴っていれば、いずれ人は来るのだろうから。

Chromeで301キャッシュを消す方法

Chromeで特定ページのキャッシュを消す方法は存在するので説明する。
ただ各閲覧者がブラウザ操作するしかないので、サイト運営者の側でコントロールする方法はないと思う。

  1. Chrome右上からデベロッパーツールを開く。
  2. Networkタブを押す。
  3. すぐ下の「Disable cache」にチェックを入れる。
  4. デベロッパーツールを開いた状態で301キャッシュされたurlをたどる。

今回紹介した「Disable cache」にチェックを入れる方法が万能です。

あるサイトでは「キャッシュの消去とハード再読み込み」による方法が紹介されていた。
しかし、その方法だとキャッシュ削除できないパターンがある。

text-transform

  • none。初期値、不変。
  • capitalize。先頭だけ大文字。
  • uppercase。すべて大文字。
  • lowercase。すべて小文字。

大文字に勝手に変換させない

WordPressのテーマなどで、勝手に大文字(または小文字)に変換するものがある。
まったくもって余計なお世話である。
CSSで応対する。

当サイトのテーマでは以下のものに見受けられた。
それぞれ、text-transformを設定する。

  • H1H2H3などH系要素。
  • コメント投稿者名。
    当サイトのテーマでは、「.comment-author .fn」。

h1, h2, h3 {text-transform: none;}
.comment-author .fn {text-transform: none;}

うまくいかない場合は、!importantを追加。

font-familyでは文字の太さに注目

欧文と和文の太さの違い

太文字の場合、欧文英文の文字の太さだけが目立つことがある。
この場合に調整すべきは、font-weightではなく、font-familyである。
Googleなどが使用しているものを使えばよい。
文字の太さの違いが気になる部分に指定する。

.widget h3 {
font-family: arial, sans-serif;
}

borderが表示されない時

太さの指定方法

一括指定。
border: solid 上 右 下 左 #000;

一部だけ指定。
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;

表示されない場合の考えられる理由

効かない場合。

  • border-wjdthのみでは表示されない。
    border-style指定が必要。
  • !importantを忘れた。

書き方

h1 {border: solid 1px #000;}

solidはborder-styleの一つで基本形。省略不可。

!importantは任意

h1 {border: solid 1px #000 !important;}

これを末尾に加えるとうまくいく場合がある。
不要なら入れないほうがいい。

抜粋・省略は用意されていた

WordPressでのカテゴリーページなどで記事を抜粋表示する方法に関して。
テーマ「Sparkling」では、その設定が用意されていたという話。

デフォルトだと、検索結果は抜粋表示だが、カテゴリーやタグは全文表示だった。
ネット検索してみるとphpの関数などが出てくるので、改造編集が必要かと思っていた。
プログラム調べてたら用意されてるような気がしてきた。

ただ抜粋時表示の善悪に関しては、微妙なところと思う。
インデックスさせるのであれば抜粋しないほうがいいかな。

サイトのカスタマイズを調べる

テーマ「Sparkling」での話である。
でも他のテーマでも、似た機能が用意されているかもしれない。

ダッシュボード→サイトカスタマイズ→Sparkling設定→コンテンツオプション。
ここに抜粋表示に関する設定がある。
最初からチェックが入っていて壊れているのかと思った。
コツがあったのだ。

  1. カスタマイズモードを維持しつつ、カテゴリーページに移動。
  2. 一度、抜粋表示のチェックを外して保存。
  3. 再度、抜粋表示のチェックを入れて保存。

これにて抜粋表示オン。当然オフに戻すこともできる。
とてもわかりにくい仕様であった。

前の記事・次の記事をなくす

WordPressでは一つの記事の下に、前の記事のリンクとかつく。
これを消すにはどうするか。

編集場所はどこか

single.phpのthe_post_navigation()関数が該当するようだ。

消し方

近辺をざっくりコメントアウト。
()やセミコロンの位置に注意。

/* コメントアウト the_post_navigation()
the_post_navigation( array(

) );
*/

乗っ取り対策

WordPressサイトの乗っ取りに備えよう。
初期状態のままではブルートフォースアタックを受けるリスクがある。
今回紹介するのは、その乗っ取り対策である。

投稿者の名前を変更する

WordPressは初期状態だと、ユーザー名が投稿者欄に表示される。
これは重要なログイン情報なのに、記事上にむき出しになる仕様だ。
この投稿者名の表示変更は急務である。

投稿者名を非表示にしたい人もいるのでしょうか。
投稿者名は、重要なステータスで、表示されている方が記事評価されると思います。

プラグイン「Edit Author Slug」の紹介。
「Edit Author Slug」をインストール。
これによりページソースにもユーザー名が残らない。
設定に関して。英字の設定画面はたぶん使わない。

まずは管理画面にログインします。
ユーザー→あなたのプロフィール。
ニックネームの登録場所があるので、あらかじめ登録しておく。
次に同じ「あなたのプロフィール」にある「Edit Author Slug」のCustomに同設定して完了。

パスワードを長いものに変更

WordPressログイン用のパスワードです。
初期パスワードがあまりに短い。
早速、長いものに変更しましょう。

ユーザー→あなたのプロフィール。
下の方にアカウント管理という項目がある。
「パスワードを生成する」ボタンをクリック。
最後に一番下にある「プロフィールを更新」ボタンで保存します。

WordPressでも2段階認証

WordPressでも2段階認証ができる。
「Google認証システム」を使う方法を紹介します。

Google Authenticator 設定

ftpにおけるリスク

今後サイト運営するということでしょうから、ftpを使用することもあるかと思います。
昔と違ってftpsとかsftpという用語が出てきてます。
暗号化したほうがいいよ、という意味だと思うんですが。
私は、「FFFTP」というソフトでftpsしています。
マスターパスワードも設定しましょう。

ftpって安全なものとはいえないらしい。
改ざんとか情報漏洩の話を聞きます。
私は詳しくないので、今回はざっくり説明。

私は以下のようにしています。
wpxサーバを使用しており、ftp使用許可のオンオフをサーバ設定で選択できます。
つまりftpを使用する時だけ、ftp使用許可をオンにするのです。

Google Authenticator 設定

自分が使っているものということで紹介します。
プラグイン「Google Authenticator」で、2段階認証にする方法です。
ただしftpソフトの扱いに関して、基本レベルの知識を持っていることが望ましい。

万が一失敗した場合

簡単なんで失敗しようがないと思うが、もしログインできなくても対処方法はある。
プラグイン設定を無効化する手っ取り早い方法は、該当ファイルを名前変更すること。
/wp-content/plugins/google-authenticator/google-authenticator.php
こんな感じのurlでしょう。ftpで最後のファイル名だけ一時的に変える。
プラグインが無効化され、元通りにログインできる。

インストールして設定場所を探す

「Google Authenticator」をWordPressにインストールし、さらに有効にする。
私の場合、WordPressはパソコン中心で、認証はスマホを使います。
アプリ「Google認証システム」をスマホにインストールします。

WordPressのどこで初期設定するのか、その場所が少しわかりにくいですが。
とりあえず管理画面にログインして「ユーザー」→「あなたのプロフィール」。
「Google Authenticator Settings」がその場所です。
まずは「Active」にチェックを入れる。
「Relaxed mode」「Enable App password」これらは無視していいようだ。私もノーチェック。

WordPressでの設定

「Secret」において、文字列(今後はキーという)を決めます。
ここには「Create new secret」「Show/Hide QR code」2つのボタンがある。
「Secret」内のこの2つのボタンは、実際に押してみればいいです。
「Create new secret」で何度か変更してキーを決定します。

この時点で「Active」にし、キー確定しているが、適用はされていない。
最下方の「プロフィール更新」ボタンを押すことで完全に適用される。
ただし適用後のしばらくは、ログアウトしないように。

さて次ですが、QRコードを使用する方法と使用しない方法がある。
QRコードを使用する場合に限って「Secret」の上の「Description」の内容が問われるようだ。
私はこの辺りが面倒に感じたのでQRコードを使用しませんでした。

QRコードを使用しない場合、キーを正確に打ち込む必要があります。
私の場合、WordPressはパソコン中心で、認証はスマホを使います。
手入力は不安なので、メールなどを使ってスマホにキーをコピペする。

後はスマホでの登録

「Google認証システム」に登録しますが、これは感覚的にできるでしょう。
十字マークをクリックし新規作成。
アカウント名はなんでもよし、後で変更もできる。
キーは、WordPressからもってきた例のキーです。
ベースは、必ず、時間ベースにします。

実行あるのみ

一度ログアウトしてから試してみましょう。
万が一、ログインできない状態になったとしてもftp操作で対処できます。
「Google Authenticator code」の欄が追加されたので、6桁の半角数字を入力する。
さすがに全部手入力だと面倒くさいです。
ユーザー名とパスワードは記憶保存させるようにしました。
パスワード保存との併用は可能で、やはり6桁入力は必要。

Chromeで特定サイトだけパスワード保存

一時的にに失敗する場合はある

自分の環境だと、クセがあるようで、ごくまれにログイン失敗します。
エンターキー連打でログインしようとした場合です。
要するに最低必要回数だけエンターキーを叩けばいいです。
もしくはログインボタンを素直に押しましょう。

一度失敗すると何回やってもうまくいかない。
失敗のたびに、ログイン画面の再読込みが必要です。

体験談

私はこのエンターキー連打ではまった。
サーバ側で回数制限が敷かれていたようだ。
何回もしつこくやったら、サーバから締め出されてしまった。
あせるし面倒なので、同じテツは踏まないように。

コメント投稿欄を非表示 CSS

WordPressコメント投稿欄のあれを消したい、でもプログラムは触りたくない。
そういう場合はCSSで消すしかない。

ウェブサイトやメールアドレスの記入欄。
「メールアドレスが公開されることはありません。」の注意書き。
今回消すのは以上三つです。

displayをnoneするだけ

自分のテーマのソースを調べて、クラス名を確認しましょう。
該当クラスにnoneします。
ダッシュボード→サイトをカスタマイズ→追加CSS

.comment-notes, .comment-form-url, .comment-form-email
{
display :none;
}

これは一例なので、状況にあわせて編集します。

書式上の注意点 CSS

WordPressでの注意点。
cssファイルの直接編集は極力避けた方がいい。
カスタマイズによる追加CSSを利用する。
テーマの更新の時にどうなるかですよね。
この追加CSSという方法ですが、headerタグ内の最下方に継ぎ足すという仕組みになっています。

とりあえず気になるのは、marginとfont-sizeとcolor(文字色)でした。

スタイルシートではタグっぽいのを、要素とかセレクタとかいいます。
今回はセレクタということにしますか、あってるかな?

複数のセレクタで指定する

h1, h2, h3 {
color: black;
}
「,」が区切り文字です。

h1, h2, h3, {color: black;}
「h3,」などと余計な区切りを入れると動作しません。

クラスを指定する

h1.entry-title, h2.entry-title {
color: black;
}
この場合はentry-titleクラスを指定しました。
<h1 class="entry-title">などとなっている場合です。

「h1 .entry-title」のようにタグとクラス名の間に半角スペースを入れていけない。

セレクタ間に半角スペースが入る場合は?

半角スペースを入れるとその下のセレクタという意味になる。
子セレクタのみにあらず孫以下のセレクタも対象かな。
詳細は後日調べておきます。

タグ内でクラス名を複数指定する

<h1 class="a b">

HTMLソースから読み解く際の注意点。
上のような記述の場合、クラス指定が二つ同時にあるという意味だ。
aクラスでもありbクラスでもある。
半角スペースが区切り文字になる。

追加しても変化しない場合は

いじってる人はわかると思うけど、実際には追加しても何も変わらない場合が多々ある。
この場合、一応次の順で試すとよろしいかと思います。

①セレクタを極力正確に指定する。
.entry-titleよりは、「h1.entry-title, h2.entry-title」のように細かく指定します。

②ずばり!importantを使う。
どういじっても動かない場合があります。
でも便利なものがありました、強力に上書きします。
h1.entry-title {
color: black !important;
}
ただ意図しない他所へのデザイン影響することは考えられます。
他のページを実際に見て、問題ないかチェックしましょう。

③!importantでうまくいかない場合もありますね。
指定の方法を細やかにしないといけない場合がある。
つまり、!importantプラス細かい指定。
もしかしたらインラインでないとダメというパターンがあるのかな?
できるだけ直近のセレクタで細かく具体的に指定しましょう。

これで動かない場合は余計な記述が入っているとかスペースの使い方が間違ってるとかを疑ったほうがいい。

追記

!importantは私も知らなかったんですね、昔の話なんで。
これ最後の項目になってしまいましたが、とても重要です。
WordPressのCSS編集は!importantなくしては進みません。
これは、誰でもカスタマイズできるというWordPressの仕様と、関係あるのではと予想します。

コメントアウトの注意点など

自分がよく使うものを記載する。

PHPのコメントアウト

  • /*コメントアウト
    コメントアウト*/
  • //コメントアウト(一行)
  • #もあったか。自分は使わない。

HTMLのコメントアウト

<!--コメントアウト
コメントアウト-->

CSSのコメントアウト

/*コメントアウト
コメントアウト*/

コメントアウトの注意点

  1. コメントアウトは入れ子にできない。
    長文のコメントアウトは極力控えよう。
  2. PHPファイルでのコメントアウトの優先順位。
    HTMLコメントアウトの中にPHP文を記述したとしても、それは実行される。
    下記のものは実行されて、表示はしない。
    <!--<?php foo(); ?>-->

ffftpにTeraPadを登録する

ffftpのファイルビューアとしてTeraPadを登録します。
環境は、Windows 10です。
実行プログラム(今回はTeraPad)の場所を探す必要があります。

ffftp

ffftpを開き、オプション→ツールで設定できる。
初期設定では、notepadが登録されている。
実行プログラムの場所を入力すればいいですね。

すべてのアプリからショートカットを探す

左下メニュー(Windowsマーク)からショートカットを探します。
左下メニュー→すべてのアプリ→TeraPad(フォルダマーク)→TeraPad。
フォルダマークでない方のTeraPadを右クリックします。
「その他」→「ファイルの場所を開く」と選択します。

ファイルの場所を開く

TeraPadショートカットを右クリックし、「ファイルの場所を開く」を選択します。
TeraPad.exe、つまり本体が見つかりました。
上方のボックスをクリックして、「C:\Program Files (x86)\TeraPad」を表示させる。

これをffftpに入力すれば完了です。

 

UTF-8NとUTF-8の違い 文字化けしないのは

今はweb上のものは、多くはUTF-8を使うんだそうです。

BOMなしはUTF-8N

文字化けの原因はBOMという、おせっかいな仕組みが原因。
文字化けしないのは「BOMなし」の方。

そして例えばTeraPadではUTF-8NとUTF-8の2種類があるのです。
「BOMなし」に該当するのは、どちらか。
ずばりUTF-8Nのほうです。

つまりUTF-8Nの選択肢があればUTF-8N。
なければUTF-8でよい。

UTF-8Nというのはソフトの中だけの呼称だそうです。
つまりUTF-8Nという選択肢がある場合に限り、UTF-8Nの方を使う。

アップロード時の改行コード

これがよくわからない。
でも経験的には、たぶんどれでもいい。
サーバ側で指定してきているなら、合わせる必要があるかな。

「はい」だけでOK 新しい2段階認証

「はい」だけになりました。
そんなわけないだろうと思ったら本当に「はい」だけだった、という話。

メリットは、パソコンなどでGoogleアカウントからログアウトしやすくなったこと。
デメリットは不明で、なぜ最初からそうしなかったのか?

2段階認証は設定したほうがいい

Googleアカウントに紐付けされたサービスを多く利用している人。
その人は乗っ取り対策したほうがいいよね。
メールだって他人に見られたくないでしょ。
まれだろうけどパソコン盗まれた場合も有効に働く。
それがより簡単になったというのだから設定してみてはいかがですか。

Googleからのメッセージを選ぶ

ポイントとしてはこの画面になる。
先に2段階認証を済ませているものとする。
その前提で再び2段階認証プロセスに入ったのがこの画面だ。

真ん中の「Googleからのメッセージ」が新2段階認証にあたる。
電話番号を追加をクリック、あとは指示に従えばいい。
完了後は「はい」だけでログインできる。

「信頼できる」デバイスとは

2段階認証プロセスの最下方では、「信頼できる」デバイスの設定ができる。
私には最初、この部分の表記が分かりにくく感じたので説明する。

2段階認証は個別のデバイス(パソコンやスマホ)ごとに、信頼できるかどうかのステータスを付すことができる。
ログイン画面で、チェックマークと「このパソコンでは次回から表示しない」の一文が表示される。
チェックマークを付せばそのデバイスは「信頼できる」とみなされる。
以後は、数字の入力なしでそのままログインできるようになる。

上の画面で「すべて取り消す」という青字のリンクがある。
クリックすると、すべてのデバイスにおいて、この「信頼できる」ステータスがクリアされる。

keyとなるスマホが不測の事態で機能しない場合は、これをクリックしてはならない。
すべてのデバイスでログイン不能となることを意味する。