カテゴリー
WPカスタマイズ

ワードプレスにアクセスできない。のでhttps化

気にもとめていなかったよ。https

昨日までアクセスできたブログなのに突然アクセス不能になりました。単なる通信エラーか何かと思いキャッシュクリアをしてみましたが、事態は変わらず。ブラウザを変更しても症状は一緒。

ググってみても、僕のようなトラブルに見舞われている人は皆無。自力で何とかせねばとなった訳です。

原因のおおよその見当はついていたので、まずはそいつから潰していこうと。それが、サイトのhttps化。数年前までは、応募フォーム位にしか設定していなかったのに昨今では、全ページhttps化にされており、ブラウザー側もhttpsサイトを閲覧できないようにしているようです。

https化

さすがエックスサーバー

僕が契約しているサーバー、エックスサーバーでは、https化を無償で対応していました。

やっすいレンタルサーバーですと有料の場合が多いのですが、これには大変助かりました。

設定も、サーバーのコントロールパネルからサクッとできたので紹介します。

https化の設定はSSL設定から

SSL設定を開くと、独自SSLの設定画面が開きます。

https化

ご覧の通り、SSLを設定していなので、設定数は0となっています。

https化

待つことで1分少々で完了

独自ssl設定の追加を選択。

https化

開いた画面の一番下の独自SSL設定を追加するをポチッとすればOK。SSL新規取得までに1分少々待たされますが、すぐに完了となります。

https化

完了画面がこちら。トラブルなく無事設定が完了しました。で、このSSLが反映されるまでに最大で1時間ほどかかりますので、しばらく待機

https化

無事、自分のサイトにアクセスできました

URL欄が、それまでのiのマークから、保護された通信に代わり、無事サイトにアクセスできるようになりました。

https化

ワードプレス側でも設定変更

で、常時httpsにアクセスできるように、ワードプレス側でも設定変更をします。

WordPressアドレス、それとサイトアドレスを、httpsに変更するだけどOKです。

https化

https化してみたものの

https化して、これでサイトの安全性にお墨付きをもらったわけですが、残念なんことに全て非表示状態。真っ白状態というのがちょいと気がかりです。

キャッシュのせいなのか、はたまたhttps化が全ページ追いついていないのか、定かではありませんが、早めの普及を切に願うばかりです。

毎年年末年始になると決まってブログ周りのトラブルが頻発。来年こそはトラブルに見舞われることなくスムーズにブログ更新できれば嬉しい限りです。

カテゴリー
WPカスタマイズ

ロリポップからエックサーバーにお引越し

ロリポップ上での下準備

停止中のプラグインは全て削除。これは引っ越し用データを軽くするため。

ロリポップ,エックスサーバー,引っ越し

次にデータベースの出力です。ロリポップの会員ページより

Webツール>データベースを選択。表示された画面の操作するを選択

ロリポップ,エックスサーバー,引っ越し

続いてphpMyadminを開くを選択。

ロリポップ,エックスサーバー,引っ越し

開いたphpMyAdminでエクスポ-トを選択します。 ロリポップ,エックスサーバー,引っ越し ロリポップ,エックスサーバー,引っ越し ロリポップ,エックスサーバー,引っ越し

ここまでがロリポップ上のデータベースのエクスポートのお話。ここまではつまづかずに何とかできました。

次にPHPのバージョン合わせのお話。エックスサーバーでは、バージョン5.3を推奨しています。ので、ロリポップ上で、PHPのバージョンを5.3にします。

ロリポップ専用ページからWebツール>PHPを選択。

バージョンを5.3(CGI)に変更します。

ロリポップ,エックスサーバー,引っ越し

このようにロリップサーバーでの主な作業はデータベースのエクスポートPHPのバージョン設定の2点です。

エックスサーバーの設定

無料お試しを10日間を利用してサーバーを契約。申し込みが完了するとメールでサーバー情報が送られてきます。で、とりあえずこちらをメモ帳などにコピペして残しておきます。

ロリポップ,エックスサーバー,引っ越し ロリポップ,エックスサーバー,引っ越し

エックスサーバーのサーバーパネルからドメイン設定を選択。

ロリポップ,エックスサーバー,引っ越し

ロリポップの時に使っていたドメインを入力してドメインの追加(確認)ボタンをクリック。

ロリポップ,エックスサーバー,引っ越し

続いてPHPのバージョンをエックスサーバー推奨の5.3.3に変更します。

ロリポップ,エックスサーバー,引っ越し

WordPressのインストールは、自動インストールを選択し、プログラムのインストールを選択。

ロリポップ,エックスサーバー,引っ越し

WordPressを選択。

ロリポップ,エックスサーバー,引っ越し

必要事項を入力して、インストール(確認)→インストール(確定)の流れを踏んで完了となります。

ロリポップ,エックスサーバー,引っ越し ロリポップ,エックスサーバー,引っ越し

ここまでがエックサーバーの契約→ドメイン登録→WordPressインストールまでの流れです。

ここまでは順調に進めました。

データベースのインポート作業

続いてロリポップサーバーでエクスポートしたデータベースをエックスサーバーにインポートします。

エックスサーバーのサーバーパネルからphpmyadmin(MySQL5.5)を選択

ロリポップ,エックスサーバー,引っ越し

WordPressをインストールしてできたデータベースを選択。

ロリポップ,エックスサーバー,引っ越し

全てのファイルを選択して削除を選択します。

これからエクスポートしたデータをここにインポートするのでデータベース内を空にします。

ロリポップ,エックスサーバー,引っ越し

で、エックスサーバーのphpMyAdminからインポートを選択し、ロリポップからエクスポートしたファイルを選択します。

ロリポップ,エックスサーバー,引っ越し

が、ここで初めてのつまずき。ググッたら解決しました。下記のコードを消したら、すんなりインポートできました。

ロリポップ,エックスサーバー,引っ越し ロリポップ,エックスサーバー,引っ越し ロリポップ,エックスサーバー,引っ越し

WordPressデータの引っ越し

データベースのインポートが無事終了したら今度はWordPressのデータの引っ越し作業。

FTPソフトを使い、WordPressデータをまずはローカルにコピペ

ロリポップ,エックスサーバー,引っ越し

ダウンロードする時は暗号化なしにして置くとダウンロード途中でエラーが起きません。

ロリポップ,エックスサーバー,引っ越し

無事全てをダウンロードしたら、以下のファイルを書き換えます。

htaccessの書き換え

ローカルに落としたWordPressデータを今度はエックスサーバーにアップロードします。

public_htmlの中に、WordPressフォルダーを放り込めばOKです。

ロリポップ,エックスサーバー,引っ越し

ここで注意して欲しいのが、僕の場合、public_html/wordpressとなるため、URL表示がcharizm0407.com/wordpressとなります。が、これが後々面倒なことになるので、最終的には、public_htmlの中にWordPressデータ一式を放り込むことにしました。

これであればURL表示もcharizm0407.comとなります。

ロリポップとエックスサーバーではディクレトリー構造が若干異なると思います。

で、無事、エックスサーバーにWordPressデータのアップロードが完了したら、htaccessの編集です。

私の場合、WordPressフォルダー(WordPressのデータを一式格納したフォルダー)の中とWordPressフォルダーの外の2箇所にhtaccessが存在していました。

ので、WordPressフォルダーの外にいるhtaccessを削除。

WordPress内のhtaccessを下記のように書き換えました。

suPHP_ConfigPath /home/サーバーID/ドメイン名/xserver_php/
AddHandler x-httpsd-php5.3 .php .phps
# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

これでhtaccessに関する修正は完了です。

wpconfigファイルの編集

まずデータベース情報がロリポップのままなので、エックスサーバー用に編集します。

ロリポップ,エックスサーバー,引っ越し

続いて、WP_SITEURL、WP_HOMEの情報も書き換えます。

変更前

ロリポップ,エックスサーバー,引っ越し

変更後

ロリポップ,エックスサーバー,引っ越し

これでwp-config.phpの編集は完了です。

ロリポップからエックサーバーへの引っ越しはググると結講出てきましたが、SITEURLとHOMEの更新についてはあまり触れておらず、この件はかなり手こずりました。

引っ越ししたかどうかの確認方法

hostsというファイルを編集して、エックスサーバーに引っ越しされたどうかを確認できます。

hostsの場所はこちら

windows/System32/drivers/etc

ロリポップ,エックスサーバー,引っ越し

OSによって保存場所が異なるので気をつけてください。ちなみに僕はWin7です。

hostsを開き、エックスサーバーのIPアドレスを追加します。

サーバーパネル>サーバー情報>IPアドレスで確認できます。

ロリポップ,エックスサーバー,引っ越し

このIPアドレスをhostsにコピペします。

ロリポップ,エックスサーバー,引っ越し

最後に

上記内容で正しく表示されるよであればOKです。

他に引っ越し後に、URLのcharizm0407.comを入力しても404表示がされますが、URLに管理画面のディレクトリーを足したりしたら、無事閲覧できました。引っ越し直後は不安定なのでしょうか・・・

とにかくエックスサーバーに引っ越して管理画面の切り替えがむちゃくちゃ早くなりました。なので、編集作業も以前に比べるとかなりスピードアップしました。

この引越でアクセスが増えることを切に願います・・・

カテゴリー
WPカスタマイズ

IDをadminから別のIDに変更する方法

adminアタック頻発

WordPressのIDをデフォルトのままだと、adminになります。これをそのまま放置していくと、悪さする人達の格好の餌食となって、パスワードの機械的に生成して、何度もアタックをしかけ、ビンゴ!

中身を改ざんされて見覚えないの記事がアップされたら、大変。

てなわけで、adminを変更をする方法を簡単にまとめました。

甘く見ていたID変更

単純に、ID欄があって、そこを新しいIDに書き換えればはい終了と思っていましたが、ことはかなりやっかい。

ID、adminを残しつつ、新たなIDを立てて、んで、adminを消すという実に手間のかかる作業なんです。

まずはバックアップ取り

WordPressにはエクスポート機能があります。こちらを使って、バックアップを取りました。

admin 変更

バックアップする際は「すべてのコンテンツ」を選択します。

admin 変更

バックアップしたデータは、インポート機能を使えばOK。

admin 変更

新しいIDを追加

ユーザー画面で、新しいIDを設定します。

admin 変更

ID、メールアドレス、パスワードを設定します。URLは必須ではないので入力しなくても問題ありません。

メールアドレスはadminと異なるメールアドレスを設定します。仮のメールアドレスでもOK。登録後にアドレスを変更できます。

admin 変更

最後に管理者を選らんで登録します。

admin 変更

adminIDを削除

IDがadminのユーザーとIDが新しいユーザーの2つが登録されています。名前が同じ、山田三郎で紛らわしいですが、異なるID名としています。

admin 変更

一括操作部分のプルダウンメニューで「削除」を選択し、適用ボタンをクリック。

admin 変更

最後の肝

「すべてのコンテンツを以下のユーザーのものにする」を選択して、削除します。「すべてのコンテンツを消去」を選択するとデータが新しいIDに引き継がれないので注意してください。

009

WordPressインストール時にしておけば

今回こんな手間のかかる作業をしましたが、Wordpressインストール時にIDをadminから別のIDにしておけば、こんな面倒なことにもなりません。

先に済ませておけがよかった・・・・

カテゴリー
WPカスタマイズ

ワードプレスのフォントをNoto Sans Japaneseに変えてみた

最新のテーマから対応

ワードプレスがバージョンアップごとに提供しているテーマ、Twentyシリーズ。

勝手に名前をつけてたりしてますが、最新のTwenty Fifteenから、Webフォントに対応。早速、フォントを変更してみました。

いじったのはCSS

htmlもイマイチ理解していない私でしたが、とりあえず見よう見まねでチャレンジ。

いじるのはCSSのみ。 CSSに以下のコードを追加します。

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

で、CSS内のNoto SansNoto SerifNoto Sans Japaneseに全て置換します。

これで作業は完了です。

変更前、変更後はこんな感じ。

変更前はイケていない明朝表示でしたが、変更後はユニーバサルフォントチックなプロポーションになりました。

変更前

webフォント

変更後

webフォント

気になるスピードは?

表示スピードに対しての影響は変更前と変更後でほぼ変わらず。私のサイトに限って言えば影響はありませんでした。

カテゴリー
WPカスタマイズ

Vineをワードプレスに埋め込む方法

ワードプレス4.1の新機能

ワードプレス4.1でVineの埋め込みができるということで、早速試してみました。

Vine 埋め込み ワードプレス

まずVineを開く

左隅のお家アイコンをクリックして自分のタイムラインを表示。スクロールして自分が撮影した映像を表示

Embedを選択

映像右端のメニューアイコンをクリックし、Embedを選択。Emed画面に切り替わり、サイズ表示形式を選択できます。

Vine 埋め込み ワードプレス

サイズの切り替え

写真は640px、320pxの場合です。

Vine 埋め込み ワードプレス Vine 埋め込み ワードプレス

表示の切り替え

Postcard表示の場合は、投稿者、再生回数(Loops)、コメントなども表示されます。

Vine 埋め込み ワードプレス

埋め込み映像がこちら

埋め込みは左サイドのコードを、ワードプレスの投稿記事欄にコピペするだけでOK

Vine 埋め込み ワードプレス

ワードプレスに埋め込むとこんな感じです。写真では伝えにくいHow toモノには使えますね。

カテゴリー
WPカスタマイズ

ワードプレス4.0を日本語化してみた。結構簡単だった

XAMPPで設定いてみたけど英語版

ローカルにワードプレス環境を構築たけど、Bitnamiのワードプレスは英語版なし。ネットで色々調べると、phpファイルをいじれと。けど、その全てが4.0以前の話。ということで、ワードプレス4.0での日本語化を試してみました。

現在、運用中のデータをコピペ

ローカルにあるワードプレスの所在が、C:\xampp\apps\wordpress\htdocs。こちらのwp-content\languagesの中に日本語ファイルをいれるだけ。

日本語ファイルは既に運用中のデータをコピペするだけ。

ワードプレス4.0の日本語化成功

管理画面>設定で言語選択欄に日本語が追加されますので、日本語を選択すればOK

データをコピペすると、サイトが日本語化されました。ここまで賞味5分。物凄く簡単にできちゃいます。

カテゴリー
WPカスタマイズ

ワードプレス環境をローカルに持つ。その3 Bitnamiインストール

Bitnamiインストール

Bitnamiサイトにアクセスし、「Bitnami for XAMPP」をダウンロード。

Bitnami ワードプレス

NO thanks,just take me to the downloadを選択

Bitnami ワードプレス

成功の画面

Bitnami ワードプレス

ワードプレスの表示言語を選択。何故か日本語がなかったので英語にしました

Bitnami ワードプレス

インストール先はデフォルトのまま。

Bitnami ワードプレス

ワードプレスのログインIDとパスワードを設定します。

Bitnami ワードプレス

ブログ名の画面。とりあえず「test」としました。

Bitnami ワードプレス

インストールは約1分ほど。Launch Bitnami WordPress Moduleにチェックが入った状態で「Finish」

Bitnami ワードプレス

Bitnami版ワードプレスにアクセス。

表示画面はこんな感じ。

Bitnami ワードプレス

ログイン画面のURL、https://localhost/wordpress/wp-login.phpにアクセスするといつもの見慣れたあの画面。

Bitnami ワードプレス

そこに先ほど設定したIDとパスワードを入力すればOK。

カテゴリー
WPカスタマイズ

ワードプレス環境をローカルに持つ。その2 MySQL設定

XAMPPサイトを表示

XAMPPサイトにアクセスして、言語表示で日本語を選択。

14

セキュリティ設定

左メニューから「セキュリティ」を選択。文字が化けているので、chromeのその他の設定>エンコーディング>日本語Shift JISを選択。文字が正常に表示されます。

MySQL XAMPP

MySQL XAMPP

MySQL XAMPP

MySQLのパスワード設定。

MySQLのパスワードが設定されていない状態のため、こいつの設定を行います。

MySQL XAMPP

MySQL XAMPP

MySQL XAMPP

設定終了後は・・・。

パスワードの設定に成功後、管理画面に戻り再起動を行います。再起動は「Stop」表示を一度、「Start]に戻して「Stop」にするだけ。

「注意」という表示から「安全」に表示が変わっていれば成功です。

MySQL XAMPP

カテゴリー
WPカスタマイズ

ワードプレス環境をローカルに持つ。その1 XAMPPインストール編

仕事で色々と必要な場面が増えた

仕事でワードプレスによるサイト製作の話が増えたのが、そもそもの発端。自分が運営しているサイトを見せれば話は早いのだが、恥ずかしい・・・。

かといって今、契約しているサーバーではMySQLが一つしかつてないので無理。で、行き着いたのがワードプレスをローカル環境でできちゃうXAMPPを使った方法。

XAMPPをダウンロード

Win7にインストールした場合で話を進めます。まずXAMPPのサイトにアクセスして、Win版をダウンロード。

XAMPP インストール

容量は144MB。注意喚起の画面がいくつか出ますが全て、YESと回答

XAMPP インストール XAMPP インストールXAMPP インストール 05

XAMPPインストール

インストールされるコンテンツ?が表示されます。デフォルトは全てにチャックが入っています。特にいじらず、次の画面へ。

XAMPP インストール

インストールフォルダーもデフォルトままで。

XAMPP インストール

Bitnamiのことについてインストールします?と聞いてきますが、ひとまずキャンセル。チェックボックスを外して次へ。

XAMPP インストール

インストールが始まり、おおよそ3分ほど待ちます。

完了すると、コントロールパネルを表示します的なことを聞かれると、チェックした状態で「Finish」。 XAMPP インストールXAMPP インストール XAMPP インストール コントロール画面を表示。

ApacheとMySQLを稼動させます。デフォルトはStartの表示なので、ここをクリックにして、StopにすればOK。稼動したことになります。

<a href="https://charizm0407.com/wp-content/uploads/11.png"><img src="https://charizm0407.com/wp-content/uploads/11.png" alt="XAMPP インストール" width="618" height="497" class="aligncenter size-full wp-image-4340" /></a> <a href="https://charizm0407.com/wp-content/uploads/11.png"><img src="https://charizm0407.com/wp-content/uploads/11.png" alt="XAMPP インストール" width="618" height="497" class="aligncenter size-full wp-image-4340" /></a>

アクセスを許可するにする。

カテゴリー
WPカスタマイズ

ワードプレスの画像のtitle名、alt名入力がはかどる方法

画像のtitle名、altは一切手つかず

画像のtitle名を入力しないと、ファイル名が設定されタイトル欄に設定されてしまいます。01.jpgや02.jpgとSEO的に全く無意味。

タイトル・代替テキスト

ので、たまりにたまった画像のタイトルと代替テキスト(alt)一斉に更新することに。

切り替えボタンでサクサク

管理画面からライブラリーを開き、タイトル、代替テキスト欄を更新。保存完了が表示されたら右上のページ切り替えボタンをクリック。

タイトル・代替テキスト

あとはこの作業の繰り返し。一心不乱にコピペ、切り替え、コピペ、切り替えをひたすら繰り返し、1時間で127枚を更新。

タイトル設定で検索精度の向上

ブログを書いていると過去に使った、あの画像を使いたいということがよくあります。今までは再ダウンロードしてましたが、タイトルを設定したことで検索で呼び出せるて、画像選びも大幅に時短化。

タイトル・代替テキスト タイトル・代替テキスト

代替テキスト(alt)は、SEO的にも、メリットがあるので、これから真面目に取り組んでいこうと思った次第です・・・。

[amazonjs asin=”4844337092″ locale=”JP” tmpl=”Small” title=”いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応”]