てくてく について

日頃はVisual StudioとSQL Serverで仕事をしているアラフィフティのおじさんです。 趣味は歩くこと、本を読むこと、映画を見ること、アニメをみること Wordpressについていろいろ書いていきたいと思います。よろしく!

ドメインの選び方

ドメインの選び方

ドメインの選び方

WordPressでブログ始める場合、自分のドメインを取得したくなりますね。
最初は様子見も有って、レンタルサーバーから無料で使用できるサブドメインを使う場合も多いですが、ブログを3か月も続けていると「意味のないドメイン名」ではなく「意味のあるドメイン」にしたくなります。
実際にはURLの由来を説明する機会も少ないのですが、説明する機会が出来たときにかっこ良く伝えたいですしね^^;

で、どんなドメイン名にするか迷いますね。
英語で行くか、日本語をローマ字にするか、などなど悩みますね。

 

ドメインは短い方が何かと良い

一つ言えることは、ドメインは短い方が何かと良いと言うことです。
ブログやホームページの体を表すドメイン名なら何でも良い気もします。

でも、「覚えやすい」「入力しやすい」「一目見てわかる」ことも大切です。

URLを直接入力することは少ないと思いがちですが、検索結果に上がってこないうちは、何かとURLを入力する機会もあります。
自分で入力するのでも長いと面倒ですし、それを他人に伝えるとなると短い方がより良いです。

 

ドメイン名はブログ名が含まれているのが良いか?

SEO的にドメイン名にブログ名が含まれているのが良いとも言われていますが、影響は微々たるものと思われます。
とてもシビアに上位を狙う必要があるのであれば、藁にもすがる気持ちでドメイン名にもブログ名を入れる工夫をした方が良いかも知れません。

個人的にはさして重要視していません。
サブドメインにブログ名に関わるものを入れる程度にしています。

日本語ドメイン名にするつもりも今のところはありませんし。。。

 

以上、「ドメインの選び方」でした。

WordPress 4.9.5 セキュリティ・メンテナンスリリース

WordPress 4.9.5 セキュリティ・メンテナンスリリース

WordPress 4.9.5 セキュリティ・メンテナンスリリース

2018年4月3日、WordPress 4.9.5 がリリースされました。
WordPress 4.9.5 はセキュリティを含むリリースなので、様子を見て重大な不具合が混入されていないことが確かめられたなら、速やかに更新することをお勧めします。

WordPress 4.9.5リリース告知によると、このメンテナンスリリースは WordPress Version 4.9の28件の問題を修正します。これにはカスタマイザー、メディアライブラリ、エラー通知、セキュリティ修正が含まれます。 同梱のテーマ Twenty Seventeen および同梱のプラグイン Hello Dolly も更新されました。

WordPress 4.9.4およびそれ以前のバージョンは3件のセキュリティ問題の影響を受けます。セキュリティ強化に対するコアチームの継続的なコミットの一環として、WordPress 4.9.5では以下の問題が修正されました。
・SSL が強制されている場合、ログインページをリダイレクトする際に wp_safe_redirect() へ切り替え
・get_the_generator() から返される HTML のエスケープ
・wp_http_validate_url() に localhost を許可しない

詳しくは下のWordPress Codex 日本語版 Version 4.9.5 のページで確認してください。
『WordPress Codex 日本語版 Version 4.9.5』
『WordPress Codex Version 4.9.5』

WordPressとドメイン

WordPressとドメイン

WordPress を始めようとレンタルサーバーを借りるとき、「ドメイン?」は?と思う人も多いと思います。
WordPressを始めるにはドメインは必要なのでしょうか?

そもそもドメインとは何なのでしょうか?

ドメインとは

ドメインとは、インターネットに存在するコンピューターにデータを送信するために使われる「文字情報」のことです。

インターネットに存在するコンピューターは、各々「(グローバル)IPアドレス」と言うものを貸与されています。
IPアドレスは人から見て覚えにくく、また貸与されていることからずっとそのIPアドレスを使い続けることも出来ないかも知れません。
IPアドレスはIPV4とIPV6が現在使われていますが、IPV4はそのうち無くなります。IPV4のIPアドレスは使い続けることができません。

そこで、IPアドレスではなく「ドメイン」をIPアドレスと紐づけることでIPアドレスが変わってもドメインさえ同じであれば常に特定のコンピューターアクセスできるような仕組みになりました。
よくドメインはインターネット上の住所のようなものと例えられますが、正確には「IPアドレスを探すための文字情報」のことです。

ちなみにドメインも貸与されているものですから、常に契約を維持する必要がありますが、契約を維持さえすれば貸与され続けます。

WordPressを始めるにはドメインは必要?

ドメインは必ず必要ですが、ドメインを独自で取得契約する必要はほとんどありません。
なぜならレンタルサーバーを借りた時点で、ほとんどのレンタルサーバーが無料のサブドメインを提供してくれるからです。

絶対に必要かと問われたら、ほとんどのレンタルサーバーでは絶対に必要ではないとなります。

では、逆に不要か?と問われたら。。。
これも否という答えになります。
ドメインはインターネット上の住所のようなものですから、住所はずっと変わらない方が良いです。
でも、レンタルサーバーを変えたらドメインも変わってしまいます。
そして借りているレンタルサーバーが永遠に借りられるとも限らないですからね。
なので、レンタルサーバーを変えてもドメインが変わらないように、ドメインを取得することは意味のあることです。

Google や yahoo、 bing で検索した人が来てくれるのは嬉しいですよね。
Google や bing などの検索エンジンも覚えているのはドメイン(URL)です。
Bookmark も覚えているのはドメイン(URL)です。
ですから、ドメインを変更したら一時的に誰も来てくれなくなります。悲しいですね。。。

WordPressとドメインのまとめ

末永く WordPress を運営し、Webサイトに多くの人に訪問してもらおうと思うのなら、お金を払ってもドメインを取得すべきです。
でも借りのドメインで十分、自分と周囲の人だけのWebサイトと言う場合は、お金を払ってまでドメインを取得する必要はありません。レンタルサーバーの契約にサブドメインをもらえることを確認するだけで十分です。

以上、「WordPressとドメイン」でした。

WordPress 写真・画像の枠を消したい

WordPress 写真・画像の枠を消したい

WordPressに写真や画像を載せたときに、枠が邪魔になるときありませんか?

そんな時はサクッと枠を消してしまいましょう。

ちなみに、CSS を設定して、ブログ上の写真・画像全部に反映させる方法と、個別に設定して個別の写真・画像のみに設定する方法があります。

ブログ上の写真・画像全部枠なしにする

CSS を使って枠( border )を指定します。

CSSは通常、テーマの style.css で設定していますので、テーマの CSS の変更をするか追加するかになります。

探す目的の場所は、#content のimg です。CSS は後から読み込まれた設定が有効になりますので、img tag の設定が複数にわたっている場合は面倒なことになりますが、ちゃんとしたテーマなら直ぐに見つけられると思います。

ちなみに、設定がない場合はそもそも枠が表示されていないか、img tag の親 tag 例えば div tag のバックグラウンドが枠のように見えてたりしてると思いますので、親のバックグラウンドが枠のように見える場合は、この方法では対応できません。親のバックグラウンドの色を透明にする必要があります。

私の使っているテーマは Twenty Eleven なのですが、画像の枠の設定は以下のようになっています。

修正は WordPress ダッシュボード>外観>テーマ編集から style.css を直接修正するか、FTP を使って修正したファイルをアップロードするなど、適当に行ってください。

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border: 1px solid #ddd;
    padding: 6px;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

これを見ると、border: 1px solid #ddd;となっていますので、枠は1pxで灰色です。

padding: 6px;は他の要素と6px離すという状態なので、どちらでも良いと思いますが、背景色を透過するのでpadding: none;も合わせて変更すると良いです。

    border: none;
    padding: none;

それから、キャプションを使っていると、キャプションを付けることで親にdiv を付けるテーマも有るので、キャプションを付けないか、キャプションを付けるなら親のdiv の背景色を透明に設定する必要があるかもしれません。

この辺りはテーマによって違うので、各々設定している箇所を探して修正するしかありません。

子テーマを使っている場合

子テーマを使っている場合は、必要な部分を含むところを書き換えるか追加してしまいましょう。

Twenty Eleven の場合は、

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border: none;
    padding: none;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

子テーマを使っていない場合

子テーマを使っていない場合は、style.cssをそのまま修正します。

但し、テーマのバージョンアップが有ると再修正しないといけないので、バージョンアップしたら再度設定を忘れないようにしてください。

バージョンアップのために子テーマの導入を考えましょう。

Twenty Eleven の場合は、下のように修正します。

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    /*border: 1px solid #ddd;*/
    /*padding: 6px;*/
    border: none;<span style="font-family:Consolas; font-size:10pt">
    padding: none;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

個別の写真・画像のみ枠なしにする

この場合は、投稿記事の html に掲載した写真のstyleを枠なしにする設定をします。

基本的には、

style="border: none; padding: none;"

を img tag に付け加えるだけです。

テキストエディタでスタイルを追加し枠を無くす

ビジュアルエディタではhtml を修正できないので、写真・画像( img )の修正もできません。

そこで、テキストエディタに切り替え該当 img に枠なし設定を追加します。

1)テキストエディタに切り替え
右上に[ビジュアル] [テキスト]タブがあります。[テキスト]をクリックします。

写真・画像の枠なし 個別設定 テキストエディタ切り替え

写真・画像の枠なし 個別設定 テキストエディタ切り替え

2)枠なしにしたい写真・画像のimg tag を探し、「<img ・・・・・・/>」の「/>」の前にstyle=”border: none; padding: none;”を追加します。

写真・画像の枠なし 個別設定

写真・画像の枠なし 個別設定

3)確認します。

写真・画像の枠なし 個別設定 結果

写真・画像の枠なし 個別設定 結果


上がそのまま、下が枠なしの写真です。

上手く枠がなくなっています。

CSSに保存しておきクラスを付けて枠を無くす

上の応用技です。記述ミスが起こりにくいので良いかも知れません。

この場合も(子)テーマの style.css を使います。

1)style.css に以下のようなCSS を追加します。
my-border-none は、クラス名です。写真・画像のCSSクラスにこのクラス名を設定すると、style に反映されます。
クラス名は重複しなければ適当でかまいません。

img.my-border-none{
    border: none;
    padding: none;
}

とりあえず、追加してみましょう。

追加は、WordPress ダッシュボード>外観>テーマ編集から style.css を直接修正するか、FTP を使って修正したファイルをアップロードするなど、適当に行ってください。

2)ビジュアルエディタにして、写真・画像をクリックし、メニュー?を表示します。
鉛筆マークのアイコンをクリックし、画像詳細画面を開きます。

写真・画像の枠なし 個別設定 ビジュアルエディタでCSS設定呼び出し

写真・画像の枠なし 個別設定 ビジュアルエディタでCSS設定呼び出し

3)画像詳細画面の「上級者向け設定」を開きます。

写真・画像の枠なし 個別設定 画像詳細画面で上級者向け設定を開く

写真・画像の枠なし 個別設定 画像詳細画面で上級者向け設定を開く

4)画像 CSS クラスを設定します。
画像 CSS クラスを設定後、更新ボタンをクリックして更新します。

写真・画像の枠なし 個別設定 画像詳細画面でCSS設定

写真・画像の枠なし 個別設定 画像詳細画面でCSS設定

5)確認します。

まとめ

全体の写真・画像に枠なしを行いたいか、一部に対して行いたいかで方法が変わってきます。
また、使用しているテーマによっては、修正箇所がわかりづらかったりもするかもしれません。

用途やスキルに合わせて、方法を選択してください。

以上、「WordPress 写真・画像の枠を消したい」の方法紹介でした。
[I want to erase the pictures or image frame in WordPress]

WordPress Really Simple SSL

WordPress Really Simple SSL

WordPress Really Simple SSL
最近のレンタルサーバーは、無料でSSL化ができるようになったので、とても助かります。
私も最近借りている「Netowl StarSever」が無料で SSL を提供してくれるのでちゃっかりSSL化を始めてます。

で、SSL 化を行った後で WordPress 内の参照とかも SSL 化対応したいのですが、そんなときに一発解決してくれるプラグインが「Really Simple SSL」です。

ちなみに、手動で行う場合の手順ですが、だいたい以下のようになります。
・ レンタルサーバーで SSL を設定(レンタルサーバーの管理画面で行います)
・ WordPress の設定>一般でアドレスを http:// ⇒ https://に変更
・ 投稿・固定ページ内のリンクを修正
・ .htaccess でリダイレクト処理
・ テーマなどで http:// で呼び出しをしている箇所を修正
・ Google 関係のツールの登録設定変更(Googleのツールで変更)

レンタルサーバーや Google ツールなどは個別で行う必要がありますが、それ以外は一発で解決してくれます。

Really Simple SSL

Really Simple SSL のインストールは簡単にできます。
まずはプラグインの新規追加から Really Simple SSL を検索し、インストールします。

WordPressSSL化-Really Smiple SSLインストール

WordPressSSL化-Really Smiple SSLインストール

インストール後、有効にするボタンをクリックします。

WordPressSSL化-Really Smiple SSL有効化

WordPressSSL化-Really Smiple SSL有効化

すると、以下のような確認メッセージとともに表示されますので、

Really Simple SSL - SSLを化有効にする

Really Simple SSL – SSLを化有効にする

「はい、SSLを有効化します」ボタンをクリックします。

以上でSSL化が有効化され、かつ http から https への 301リダイレクト されるそうです。

また、上の.htaccess で行った時と決定的に違うのが、内部で参照している画像等を http → https に自動で行ってくれるので修正する必要がありません。
私は当初は、投稿・固定ページ内のソースを自動でしてくれると思っていたのですが、ソース内のURLリンクは http のままですがブラウザで表示してみると https になっているので、HTMLを作るときに自動で https にしていると思われます。

なので外部のURLを参照するときに問題が出るかもしれません。私の場合は、外部のPDFを読み込むときに https になってしまい、PDFを読み込めなかったケースがありました。
そこを少し気を付ければ大方は手を加えなくて済むので助かります。

以上、「WordPress Really Simple SSL」の紹介でした。

※2018-05-11追記
Search Console Accelerated Mobile Pages に『ページにユーザー作成の JavaScript がある(重大な問題)ページからカスタム JavaScript のコードをすべて削除してください。AMP ページにカスタム JavaScript があると、Google 検索結果に AMP 固有の表示機能が表示されないことがあります。 詳細』と以下のような通達が来ました。

重大な問題のある AMP ページ

重大な問題のある AMP ページ


Really Simple SSL は設定によってJavaScriptを出力します。他のサイトでも Really Simple SSL を使用しているのですがこの警告?通達?通告?は出ていないので Really Simple SSL が悪さをしているとは限りませんが、他のプラグインでJavaScript を出力するものは無いので。。。
そのうち改修されるかも知れませんが、私は Really Simple SSL を使うのを止めました。
※2018-05-11追記終了

WordPress の日本語版と英語版の違い

WordPress の日本語版と英語版の違い


一昨日 WordPress 4.9.3 がリリースされましたが、今朝になってまた WordPress 4.9.4 がリリースされました。
どうやら 4.9.3 の重大なバグが発見され、緊急修正・リリースされようです。

今は自動リリースされてしまうので既に WordPress 4.9.3 になっています。
そんな重大なバグなら早速と思ったのですが、自動更新ができな不具合を修正したみたいですね。慌てることもないかな。
でもまぁこの際忘れて放置も困るので 4.9.4 に更新しとくのが良いかと。
日本語版は出ていないようなのでとりあえず、オリジナルの英語版の英語版を入れることになるのですが、そこで今更ながらオリジナルの英語版と日本語版の主な違いを調べてみました。

ちなみに、-jaが付くものが日本語版です。
英語版は WordPress 4.9.4
日本語版は WordPress 4.9.4-ja 「 WordPress.org 」からダウンロードできます。

WordPress の日本語版と英語版の主な違い

・ WordPress に日本語翻訳ファイルが付いてくるかどうか
・ WP Multibyte Patch プラグインの同梱
・ readme.html の日本語化
・ wp-config-sample.php の日本語化
・ version.php に $wp_local_package = ‘ja’; が付加されている
・ 新規インストール時の設定初期値が日本語版は、タイムゾーンが東京、サイトの言語が日本語

英語版の日本語化

もともと日本語版の WordPress がインストールされていれば、何もする必要はないようです。

初めてインストールする場合のみ、日本語化します。
で、 WordPress は多言語対応なので、英語版の言語設定を変更するだけで日本語化できるようです。
上の差異から、
・サイトの言語
・ユーザー毎の言語
を変更して、
・WP Multibyte Patchプラグインをインストール

とりあえず、・タイムゾーンを東京もかな?
しなくても日本語化になるけど、、、

以上で、日本語化完了です。
気になるようなら、WordPress 4.9.4-ja が出るのを待って更新すれば良いですし。

以上、「WordPress の日本語版と英語版の違い」についてでした。

WordPress 4.9.4 メンテナンスリリース

WordPress 4.9.4 メンテナンスリリース


2018年1月6日、WordPress 4.9.4 がリリースされました。

WordPress 4.9.4 では 4.9.3 の重大なバグが修正されています。
重大なバグとは、自動更新が出来なくなってしまった不具合だそうです。
自動バックグラウンド更新をサポートするサイトでも自動的に更新されませんので、4.9.4 に更新されるための手動で実施する必要があります。

詳しくは下のWordPress Codex 日本語版 Version 4.9.4 のページで確認してください。(2018/2/7日時点では日本語版のページが作成されていません)
『WordPress Codex 日本語版 Version 4.9.4』
『WordPress Codex Version 4.9.4』

WordPress 4.9.3メンテナンスリリース

WordPress 4.9.3 メンテナンスリリース

WordPress 4.9.3 メンテナンスリリース
2018年2月5日、WordPress 4.9.3 がリリースされました。

WordPress 4.9.3 では、Customizer チェンジセット、ウィジェット、ビジュアルエディタ、および PHP 7.2との互換性に関する修正を含む、4.9の34のバグが修正されています。

詳しくは下のWordPress Codex 日本語版 Version 4.9.3 のページで確認してください。(2018/02/07 日時点では日本語版ページが作成されていません)
『WordPress Codex 日本語版 Version 4.9.3』
『WordPress Codex Version 4.9.3』

WordPress 4.9.2セキュリティ・メンテナンスのリリース

WordPress 4.9.2セキュリティ・メンテナンスのリリース

WordPress 4.9.2セキュリティ・メンテナンスのリリース
2018年1月16日、WordPress 4.9.2 がリリースされました。

これは、WordPress 3.7以降のすべてのバージョンのセキュリティおよびメンテナンスリリースです。
すぐにサイトを更新することを強くお勧めします。

WordPress 4.9.2で21個のバグが修正されました。

詳しくは下のWordPress Codex 日本語版 Version 4.9.2 のページで確認してください。
『WordPress Codex 日本語版 Version 4.9.2』

テーマ Twenty Eleven の投稿ページにサイドバーを付ける

テーマ Twenty Eleven の投稿ページにサイドバーを付ける


少し前に「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」を投稿したので、ここは投稿ページにもサイドバーを付けてみようかと思い調査しました。
投稿ページは、固定ページみたいに簡単に付きませんでした。
が、ググってみると簡単にできますというWebサイトを見つけたので参考にしながら試行錯誤して付けてみました。
ちなみに、ググって見つけたWebサイトのやり方では表示されるのですが、下に付く形で表示されてしまい「なんだかぁ~」って感じになってました。

テーマ Twenty Eleven の投稿ページにサイドバーを付ける方法

試行錯誤で試しながら付けたため、どのWebサイトでも正常に表示されるか保証はできません。
でも、テーマ Twenty Eleven を使っているなら、たぶん正常に表示されると思います。

single page の css を変更する

「 Twenty Eleven Child w/ Sidebar Support 」と言う、Twenty Eleven の子テーマを見つけて参考にしました。
下のようにマージンや表示幅を変更します。
私の場合は、既に子テーマを作ってしまっていたため、自分の子テーマの style.css に追加する形をとりました。


/* Singular */
.singular #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 34% 0 2%;
width: 64%;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 100%;
}

single.php にサイドバー表示を追加する

私の場合は、子テーマに single.php が入って居なかったため、子テーマディレクトリに single.php をコピーしました。
FTPで Twenty Eleven の single.php をローカルにダウンロードして、子テーマにアップロードしました。

その後、サイドバー呼び出す関数 php get_sidebar() を下のように追加しました。
修正前:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

修正後:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

この作業までだと、サイドバーは表示されるのですが、正常な位置・表示して欲しい位置に表示されません。
パソコン表示では、本文の下に表示されるような形になってしまいました。

body要素に「 singler 」クラスを追加するフィルタを削除します


/**
 * Add two classes to the array of body classes.
 *
 * The first is if the site has only had one author with published posts.
 * The second is if a singular post being displayed
 *
 * @since Twenty Eleven 1.0
 *
 * @param array $classes Existing body classes.
 * @return array The filtered array of body classes.
 */
function twentyeleven_body_classes( $classes ) {

	if ( function_exists( 'is_multi_author' ) && ! is_multi_author() )
		$classes[] = 'single-author';

	if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
		$classes[] = 'singular';

	return $classes;
}
add_filter( 'body_class', 'twentyeleven_body_classes' );

Twenty Eleven は、上のようにbody要素に「 singler 」クラスを追加するフィルタを追加しています。
子テーマの functions.php は、親テーマの機能を上書きできません。
親の functions.php に追加する形が一般的です。
と言うか、親テーマのファイルの 直前 に読み込まれるので上書きは無理ですし、エラーになります。

そこで、親テーマがフィルタを追加した後に、削除する方法を取ります。


add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
	remove_filter( 'body_class', 'twentyeleven_body_classes' );
}

これで、singlerクラスが body 要素に追加されるフィルタを削除できます。

まとめ

・single page の css を変更する
・single.php にサイドバー表示(get_sidebar())を追加する
・function.php に singler クラスを追加するフィルタを削除する関数を追加する

3つの作業で、テーマ Twenty Eleven の投稿ページにサイドバーが表示されるようになります。

以上、「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」でした。