まっ、そんな感じ

見聞きしたことを徒然と書いてます。

履歴の消去でcss反映!!

Wordpressは『グーテンベルク』というビジュアルエディタに移行中。

で、従来のクラシックエディタで運用していた写真サイトのテーマを『グーテンベルク』対応に換えたところ……いろいろ問題が発生(苦笑)

それでも凝ったことはしていないのでなんとかなっていたのですが、最後に残った問題が『divのcssは反映するのに、H3とH4に設定したcssがどうしても反映しない』ってこと。

ググると出てくるのは『css全体が反映しない』がほとんどで、私のように反映するものとしないものがあるケースはどうしても見つからず。
それに子テーマ内のfunction.phpもstyle.cssは何度も見直して問題ないはずなのに、どうして?!!

そうして気付いたのが『safariには『開発』がある!!』です。

普段は表示されていませんが[safari]-[環境設定]-[詳細]内の一番下に『開発』を表示するチェック項目があります。
前回サイトをいじったときチェックを付けて、メニューバーに表示していたのを忘れてました。

f:id:kosigan:20190615202118p:plain

ここにチェックを入れるとメニューバーに『開発』が表示されます。

f:id:kosigan:20190615202349p:plain

 

さてこの表示された『開発』で自分のサイトのリソースを見てみると、左『parent-css』も右『child-css』も読み込まれている?!

f:id:kosigan:20190615202458p:plain
f:id:kosigan:20190615202509p:plain

 

となると問題は……ブラウザの履歴!!

そこで履歴を消去してみたら見事に反映されました(笑)

f:id:kosigan:20190615202716p:plain

既存の投稿でH3やH4にclass設定で修飾していた分と、今後投稿するときは追加CSSをしなくても良いように2つを設定してあります。

これでしばらくはサイトをいじらなくていいかな。

それにしても、従来のビジュアルエディタがキライでクラシックエディタを使っていたし、今度の『グーテンベルク』も使いづらくてどこが良いんだか……。

タグを手打ちしても良いじゃないかぁ!!

 

WordpressをSSL対応したが画像がアップロードできないときは……

以前、こんな記事を書いた。

takafumi.hatenadiary.jp

これを書いたときのサイトではなにも問題は起こらなかったんだけど、もう一つ運営しているサイトを今日SSL対応にしたら、タイトルの通り画像のアップロードがうまくできず。
いろいろやってたら「もしや……」と思えるところがあり、そこを直したらうまくいったのでご紹介。
ただし、必ずしもうまくいくとは断言できない。
なにしろ素人に毛が生えた程度の知識なので。

さて、どううまくいかないかというと、本当ならこのように今月(2018年4月)がプルダウン表示されるはずなのに出てこず、アップした画像も表示されない!!

f:id:kosigan:20180407203831p:plain

で、悩んだ結果、もしや……と思いついたのがここ。
[一般設定]内の「アドレス」項目。

見てみると一括変換したはずなのに「http://」のままになっていた。

f:id:kosigan:20180407204520p:plain

そこで、ここを「https://」に直してキャッシュをクリア。

もう一度[メディア]から試してみると今度はちゃんとアップできるし、上記のように今月がプルダウンに表示される!!

一回設定してしまうとイジるところでもないので、Wordpressの基本をすっかり忘れていた(苦笑)

ということで、もしSSL対応にしたら画像などがアップできないときは、プラグインで一括変更しても[一般設定]を確認するといいと思う。

WordpressをSSL対応にしてみた

リンクしている私のサイト Photo de Trip はロリポップ独自ドメインWordpressを運営している。
2017/7/10からロリポップが独自SSLを無料で対応し始めたので、設定してみた。
簡単……とは言えないけど、一応 https:// で見られるようになったので、備忘録を兼ねてご紹介。

 ロリポップSSLを有効にする

ユーザ専用ページに入ると案内があるので、その通りにするだけ。

  1. [証明書お申し込み・設定]で自分のドメインにある[独自SSL(無料)]を設定するボタンをクリック。
  2. すると[SSL保護申請中]に代わり、このまま1〜2分程待つ。
  3. SSLで保護されているドメインに切り替えて、自分のドメインが出てきたらこれで終了。

f:id:kosigan:20170711204119p:plain

Wordpress側での設定

ここからが手間のかかる手順。
実は有料&切り替えの手間が面倒でやってなかったんだよね(苦笑)
今回はこちらの手順を参考にしました。

triz-web.com

ただ、書いてある順番だとサーチコンソールの設定がうまくできなかったので、ちょっと順番を変えました。

アドレスの変更

ロリポップの設定ができたら、Wordpressにログイン。

一般設定のWordpressアドレスとサイトアドレスを https:// に変更して保存。

記事内のURLを https:// に変更

記事内でほかの記事にリンクを貼っていたり、画像を貼ってたりしたら、それらのURLを変更する必要がある。

そこで、上記のサイトに書いてあったプラグインSearch Regex」を利用。
このプラグインWordpressの最新バージョンに対応してなかったけど、使用は可能。

これを使って記事内の http:// で貼られているリンクを https:// に一括置き換え。

置き換えたらこのプラグインは使用停止にしてOK。

301リダイレクトを設定

閲覧者がブックマークしているURLはこちらでは変更できないので、http:// で飛んできたアクセスを新しい https:// に変更させるのが目的。

これも上記のサイトに書いてあったプラグイン「Simple 301 Redirects」を利用。

えーと、これもWordpressの最新バージョンに対応してなかったけど、使用は可能。

これを使って移行元 http:// → 以降先 https:// に設定して保存。

置き換えたらこのプラグインは使用停止にしてOK。

 

さて、ここまでできたらWordpressのキャッシュをクリアして、https:// からのURLでサイトが開けるか、画像とかリンクとか切れていないかを確認しておこう。
サイトに埋め込んだ画像やギャラリー表示するためのFooGalleryも問題なく表示できた。(たぶん Search Regex のおかげかな?

あっ、記事内に貼った自分の他の記事へのリンクは手修正が必要でした(苦笑)
Wordpressの標準機能でリンクしてたんだけど http:// からのURLだったんだなぁ〜

 

追記:画像は消えたなかったけど、形式が変になっているものが……。

  • FooGallery:一部はOKだったけど、一部はアルバム形式が解除されてた。
    ただ、解除された投稿を再度「更新」するだけで元通りに。
  • Wordpressの標準機能「メディアを追加」で入れた画像も大丈夫なものと、もう一度「メディアを追加」しなきゃいけなかったものがあった。
    全部同じように追加してたんだけど、何でだろう?

Googleの設定を変える

アナリティクスのサイトURLを変える

さて、サイト持ちだとGoogleアナリティクスは使っていると思う。
だから、Googleアナリティクスに登録してあるサイトURLの変更が必要。

これはアナリティクスにログインして、サイトのプロパティ設定で[デフォルトのURL]を http:// から https:// に変えるだけ。

設定したら[保存]をクリック。

サーチコンソールの登録URLを変える

上記のプロパティ設定画面下に[Search Console]があるのでクリック。

ここでどのURLをリンクするか選択できるので、新たなURL https:// 始まりのURLを選択して[保存]をクリック。

 

以上で終了。

301リダイレクトしてあるけど、アフィリエイトとかしてたら、それらの登録URLを確認しておいたほうがいいのかな?