IT / Wordpress系

WordPress UX Update : March 2020 – ついでにロリポップのMySQL5.6へのアップデートで焦った件

最近ブログの構成やデザインのビッグマイナーチェンジを行ったので、使用したプラグインや参照させて頂いたサイトなどを備忘録を兼ねて残しておきます。

Sponser’s Link

ブログのテーマは何だっけ→無理やり絞った(宣言した)

そもそもの始まりは、元々「写真ブログ」というあまりに広範な看板を掲げていましたが、実際にはキャンプの記録、旅先の記録、車関連の記録、それらと同じくらいの頻度で写真・撮影機材関連の記事、という感じで、ブログのテーマがあっちゃこっちゃ行ってしまっていました。

そこで潔く、本ブログのテーマを以下のように絞り込んで定義しました!

 

本ブログは、

      • 旅行記
      • キャンプ
      • 写真・カメラ

関連をテーマとするブログである。エッヘン!

 

はい、全然絞り込めてませんねwww

 

ただ、従来と変わったのは、これらを看板として一応明確に掲げた事です^^;

まずはこれに合わる形でヘッダのメニューを変えています。

 

Sponser’s Link

トップページにジャンルごとのサムネイル記事を配置してみた

次にトップページの構成です。

まあ、このブログの場合、アクセスの9割は検索エンジン、次いでSNSからの記事直リンクなのでトップページというのはそれほど力を入れても仕方がないのかも知れませんが、それでは筆者のちり紙ほどの美学が許しません(笑)でもほら、今新型コロナでトイレットペーパーやティッシュペーパーも希少な存在ですから、ちり紙をバカにしてはいけませんよ!

それに、記事から興味を持って頂いてトップページから回遊して下さる奇特な方も居られるかも知れませんからね。

ということで、従来はトップページに単純に新着記事が新しい順に並ぶ形で、ヘッダーのメニューからのみ各ジャンルのページへ飛ぶ形でしたが、今回の変更で以下のようにしています。

  • 全ジャンルの新着記事一覧のサムネイルを一番上に配置

→「もっと見る」で全ジャンル新着記事一覧固定ページへ

  • 各ジャンルの新着記事一覧のサムネイルをその下に順に配置

→「もっと見る」で各ジャンルの固定ページへ

またトップページのトップには各ジャンルのサムネイル一覧へのページ内アンカーへ飛ぶページ内リンクボタンを配置しています。

またリンク先の各固定ページも、一覧性を高めるためにサムネイルでの記事一覧表示に変えています。

 

Sponser’s Link

使用したプラグイン等一覧

以下、ほぼ自分用の備忘録です。なんちゃってWordpressユーザーなのでほぼプラグイン+CSSカスタマイズで済ませてます(汗)

 

カテゴリー毎の記事をサムネイルで表示

WP Show Posts
Add posts to your website from any post type using a simple shortcode.

このプラグインはカテゴリーやタグで記事を拾って一覧にするものなので、今回まず記事のカテゴライズを整理し直す事が必要になりました。

 

固定ページ等へのボタンの動的CSS

こんな感じ
で、今回は”more-button”っていうClass属性を作り、それに下記サイトから頂いたCSSを追加CSSにて設定してます。

コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選 | GrowGroup
このブログページでは、コピペするだけで実装できる「癖がなくて使いやすい」「お洒落」なボタンのサンプルコードを掲載しています♪シンプルなものからホバーアクションに少しこだわったものまで紹介しています!

 

パンくずリスト

ジャンルごとの固定ページが増えて構成が複雑になったので現在地を示すパンくずリストを導入。これはただのプラグインなので有効化すればすぐに使えます。

パンくずリスト

Breadcrumb NavXT
訪問者に対し現在地へのパスを表示する「パンくずリスト」ナビゲーションをサイトに追加します。

 

HTMLサイトマップ

パンくずリスト導入と同じ理由で、サイトマップを用意しました。今回は固定ページのリストにしています。固定ページを変更すると動的に反映されます。

サイトマップ

こちらもプラグインなので簡単に導入できます。

WP Sitemap Page
Add a sitemap on any of your page using the simple shortcode . Improve the SEO and navigation of your website.

 

ページ内リンク(アンカー)へヌルっとスクロール

上の方で書いたとおりトップページでアンカーリンクを使ったので、ページ内リンクがヌルっとスクロールするようにしました。

こちらはHeader.phpにてjQueryを呼びに行くような仕組みになってるので少しだけ敷居が高いですが、こちらのサイトの通りにやれば簡単です。

プラグイン不要でスムースにスクロール。WordPressでページ内リンク(アンカーリンク)を設置する方法。 – ワードプレステーマTCD
ブログやサイトを閲覧していると、目次が用意してあり、ユーザーが気になるタイトルへダイレクトにジャンプできるサイトは多いですね。簡単に記事の目次を設置するには、こちらのプラグインが便利です。

 

主なところは以上です。

 

Sponser’s Link

ロリポップのMySQLを5.1→5.6にアップデート

で、WordPressの管理画面でちょうどこんなWarningが出てたので、ロリポップレンタルサーバーのMySQLを5.6にアップデートすることにしました。criticalなんて言われちゃねぇ旦那。

Wordpress MySQL

 

主に参考にさせて頂いたのはこちらのサイトです。

ロリポップ! でデータベースをMySQL5.6.11にアップデートする手順
当ブログで利用しているレンタルサーバー「ロリポップ!」がMySQL5.6.11を導入したので、データベースのアップデートをしてみました。

筆者のロリポップレンタルサーバー契約プランは一番しょぼいプランなので、データベースを同時に複数持つことが出来ず、DBをアップデートするには古いDBの中身をバックアップしてDB自体を削除した後、新しいDBを作成してそこに先程バックアップした中身をインポートする必要があります。

で、この通りに進めてphpMyAdminからSQLファイルをアップロードすると、


— データベース: 古いDB名

— ——————————————————–

— テーブルの構造 wp_commentmeta

DROP TABLE IF EXISTS wp_commentmeta ;

#1046 – No database selected

このエラーが出たので、予め調べてあったこちらのサイトの通り、

『ロリポップのMySQLのバージョンアップ』
これまたタイトルを見て全く意味が分からない方は見ないほうがいいかもしれないけど、今度はデータベースのMySQLのバージョンアップにチャレンジ。 なんだかんだと…

db `新しいDB名`;

という一行を追加しようとしたのですが、、、なんとこのSQLファイルがMacのテキストエディタでは開けない・・・どうも文字コードが関係しているようですが詳しい原因が分からず、色々試行錯誤した挙げ句、Microsoftが提供している「Visual Studio Code」のMac版で開くことが出来ました。

それでようやっと上記の修正を行って再度phpMyAdminからSQLファイルをアップロードすると、今度はこんなエラーが出てしまいました(汗)

#1064 – You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near [新しいDB名]

で、他のサイトも見てみたのですが、こちらのサイトでは、「db `新しいDB名`;」ではなく、「USE 新しいDB名;」と「` `」を付けない文法になっています。

WordPressの引越し時にmysqlで:#1044 Access denied エラーが出たら | それでも世界はまわってる
いつものごとく、WordPressサイトをあるサーバーから別のサーバーへ引越ししようとしていたら、phpmya

ところがこれでも上と同じSyntaxエラーが出てしまいました・・・

その間ずっとブログはエラー表示のまま・・・一応夜中の1時過ぎに作業しましたが、このまま復旧しなかったらどうしよう・・・とだんだん顔が青ざめて来ます。

結局正しい構文が何なのかGoogleで調べても判明せず、何パターンか試した結果、

USE ` 新しいDB名 `;

で上手くいきました・・・。筆者の環境の場合、「USE」の後の新DB名に「` `」が必要だったようです・・・

いやはやあわや徹夜どころか最悪ブログ消滅の危機でした・・・寿命が2秒位縮まりましたね(滝汗)

※一応WordPress側でもバックアップは取ってあったので完全消滅ってことにはならなかったとは思いますが・・・バックアップは大事ですね(  °ω°)

 

毎度、こうした解説やサンプル、プラグインをご提供下さっている皆様には大変感謝ですm(_ _)m

 

Sponser’s Link

過去のWordpress関連記事

ロゴの作り方の備忘記事

WordPressテーマ変更、そして「令和日報」へ改名か・・・!(子テーマとサブディレクトリの残念な関係およびロゴ作成について)
いよいよ令和の時代が始まりますね! そうなると日本人の十人中九人が思い悩むであろう問題は 「ブログ名を令和にちなんだ名前にしようかなあ、どうしようかなあ」 ということですよね、うんうん(・∀・) ご多分に漏れず筆者も小一時間悩みましたよ。 ...

コメント