【WordPress】旧エディタ案件編集で大活躍したサイト

旧エディタ使ったことあります?

9月はプログラミングの勉強を始めて以来の発案件ゲット!

しかも2件!!

2件ともクラウドワークスで応募して受注したもので、両方とも1枚もののLP的なWebページ制作でした。

1件目はHTMLとCSSで納品してほしいとのことで、ひっさびさに「Visual Studio Code」をガッツリ使用。

超急ぎ案件だったので夕方受注の翌日昼前には納品。

そして2件目・・・

これが本当に大変手こずりました!!!

  • 既存のWordPressサイトに1ページ追加
  • そのサイトはかなり作り込んだ自作テーマ!!
  • しかも旧バージョン、つまり旧エディタ、つまりつまりHTMLで入力していかなくてはならない!!!

他のページに不具合が出るといけないのでバージョンアップはしないでくださいとのこと(泣)

結局どうやったかというと、新バージョンのブロックエディタ「Gutenberg」で作ってそのコードを旧エディタに貼り付け修正編集していくという裏ワザで乗り切った!!!

WordPress旧エディタ編集で鬼使用したもの

以下、今後の自分のためにも列挙します!

WordPressエディタ「Gutenberg」に対応したプラグイン

VK Blocks

WordPressの管理画面より無料でインストールして利用。

便利すぎてこれがないと困るWordPressのプラグイン。このサイトもこれを使用しています。

WPのバージョンアップは不可でしたがプラグインのインストールは許可いただきました。助かった!

これで〈自分のWPサイトで要素を作成→プレビュー→コードを表示→コピペ〉という裏ワザが使えました!!

ExcelからHTMLテーブルタグに変換

ExcelからHTMLテーブルタグに変換

HTMLで面倒なテーブル構造の作成はこれでおさらば。サーバーにアップロードされませんので機密文書にも安心。
Excel to HTML. Excel表をHTMLテーブルタグに変換します。セル結合にも対応。 ←泣

表が何点かあり、あーエクセルでさっと作ってHTMLにできれば・・・と思っていたらこんな便利なものがありました!

自作テーマでそもそもテーブルの設定がされていたので本当にこれは助かりました。

CSSで(そう、直接HTMLに書いたんですよ)細かい編集をしました。

色見本色の名前とカラーコードが一目でわかるWEB色見本

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本。ブラウザで名前が定義されている140色の色名と16進数。

CSSで色指定の時に鬼使用しました!(CSSはHTMLに直接書き込んでいくのです・・・)

画像から色のRGBを取得するスポイトツール

PEKO STEP

「このボタンはこのロゴと同じ色で」という指示があり、また既存ページと色を合わせるために使用しました。

結局2件目はバナーも2個作成することになり、追加料金をいただきバナーも設置。

初っ端からHTMLとCSという想定外の事態になりましたが、すごく勉強になったしなんだかんだやり切れる自信が付きました。

Follow me!
のぞいてみてね!