Glósóli

うーん

WordPress サイトの作成から納品まで

WordPress まわりの仕事が増えてきて、自己流ながら手順がなんとなくわかってきたのでまとめておきます。参考までに僕のスキルセットとしては、

・HTML / CSS / JS で静的サイトをサクサク作れる

PHP が最低限わかる

みたいな感じです。

1. 静的サイトを作る

HTML / CSS / JavaScript で静的サイトを作る。やっぱローカルで動くと安心する。

2. WordPress のインストールをやる

なんらかの手段で WordPress をインストールする。なんだかんだロリポップとかはデータベースも含めて楽で良い。

3. 1.で作った静的サイトをテーマ化する

WordPress 本を片手にひとまず最低限のテーマ化をやる。

本はこれ↓。いつもお世話になっています。

https://www.amazon.co.jp/dp/B00ZYYOESG

テーマ名の設定とかはここのテンプレでよい。

https://olein-design.com/blog/template-style-css-file

4. プラグインを突っ込む

突っ込むもの↓

  • Advanced Custom Fields PRO
  • Custom Post Type UI
  • Custom Post Type Permalinks
  • EWWW Image Optimizer
  • Classic Editor
  • WP Multibyte Patch
  • Admin Menu Editor
  • Intuitive Custom Post Order

できるだけプラグインを使って functions.php は汚さないでいきたいねってスタンスでやっていきます。Custom Post Type UI でカスタム投稿タイプ作って Advanced Custom Fields PRO でカスタムフィールドを作っていく。Advanced Custom Fields は 100 AUD で買えるので即座に購入するといい。Custom Post Type Permalinks は年ごとのアーカイブページを作ったりするときに使う。

Ajax で記事を動的に拾ってくるやつは、これを参考にやるとなんとかできる。この辺ってあんまりプラグインないのかな。 

https://rudrastyh.com/wordpress/load-more-posts-ajax.html

5. テスト環境から本番環境に移行する

最初はサブドメインWordPress サイトを構築しておいて、記事がそこそこ溜まってきたら&納品先の方が投稿に慣れてきたあたりで、メインのドメインに移行するのがいいのかなーと思っています。

All-in-One WP Migration

環境設定や投稿内容、プラグイン、そしてテーマの移行は All-in-One WP Migration で移行する。All-in-One WP Migration はすごい、データベースなんもわからんくても使える。テスト環境から本番環境への移行はこれで一発です。

https://ja.wordpress.org/plugins/all-in-one-wp-migration/

まとめ

便利なプラグインたちはすごい。ありがとう先人たち…

新卒で会社勤めになる前に読んでよかった本 5選

会社にノート PC の充電器を忘れて暇なのでブログを書きます。お金編、コミュニケーション編、生活編に分かれている。

 

お金編

駆け出しクリエイターのための お金と確定申告Q&A
駆け出しクリエイターのための お金と確定申告Q&A

駆け出しクリエイターのための お金と確定申告Q&A

 

確定申告なんもわからんからチョットワカル状態になった本。副業時代→独立後、みたいな流れで書かれててわかりやすい。freee などのサービスで楽をしようねスタンスなのもよい。

 

20代で知っておきたいお金のこと
20代で知っておきたいお金のこと

20代で知っておきたいお金のこと

 

資産運用とか投資などの単語があまりこわくなくなる本。勧められたので読んでみたけどよかった。一部情報が古かったり、読者を納得させるための理論武装がややくどかったりはする。

 

コミュニケーション編

人を動かす
人を動かす 文庫版

人を動かす 文庫版

 

タイトルはこわそうだけれど内容はこわくなく、「周りの人に動いていただくにはどのような立ち振る舞いをするとよいか」みたいなノリの本。古典的名著とのことで、古典的名著という概念に弱いので手にとってみた。歴代大統領などの偉人のエピソードを載せつつ話を展開しており、読み物としても楽しい。

 

発達障害の僕が「食える人」に変わった すごい仕事術

みんな大好き(?)借金玉さんの著作。仕事や人間関係をやっていくためのノウハウが小気味よい言語化とともにまとめられている。発達障害持ちの人に限らず、わりと万人に当てはまる内容だとおもう。

 

生活編

片づけ・収納・掃除・洗濯の教科書
片づけ・収納・掃除・洗濯の教科書

片づけ・収納・掃除・洗濯の教科書

 

家事の正攻法を身につけたくて買った。今をときめくこんまりも共著で出てくる。当時は普通になに言ってんだこいつと思った覚えがある。「掃除」の項目はとても参考にしていて、「超電水クリーンシュシュ」とか「オキシクリーン」などの便利グッズを知ることができる。一人暮らしなら一冊持っているとよいかと思います。

 

おわりに

今度 PC の充電器を忘れたらレシピ本まとめでも書こうかと思います。

GAS で Google Drive 内の隠しファイル(ドットではじまるやつ)を全部消す

色々あって Google Drive 内で Mac の隠しファイル汚染がひどいことになっていた。

 f:id:yamatoiizuka:20190313114811p:plain

ほぼ全てのフォルダがこんな感じなのでどうにかしたい。楽な手段を調べたけど諦めが発生したので GAS を書いた。GAS、スポ根とか精神論とかそっち系な気がしてきた…

function myFunction() {
  var base_folder_id = "検索対象とするフォルダのID"; 
  var parent_folder = DriveApp.getFolderById(base_folder_id);
  removeHiddenFiles(parent_folder);
}

function removeHiddenFiles(folder) {
  var folders = folder.getFolders();
  var files = folder.getFiles();
  while (files.hasNext()) {
    var _file = files.next();
    var _file_name = _file.getName();
    if (_file_name.indexOf(".") == 0) {
      Logger.log("ファイル名: " + _file.getName());
      // ゴミ箱に移動する
      _file.setTrashed(true);
    }
  }

  while (folders.hasNext()) {
    var _folder = folders.next();
    // フォルダを再帰的に掘っていく
    removeHiddenFiles(_folder);
  }
}


f:id:yamatoiizuka:20190313115505p:plain

いい感じ。Google App Script の仕様上 6 分でタイムアウトするらしいのでフォルダの深掘りには注意。あと setTrashed はファイルのオーナー権持ってないと効果がないっぽいので、共有フォルダとかでなんとかしたい場合は removeFile あたりを使うと良さそうです(未検証)。

https://developers.google.com/apps-script/reference/drive/folder#removeFile(File)

忘備録:香港旅行におけるインフラ周り

交通手段

オクトパスカード

Suica 的なやつ。タクシーを除くほとんどの交通機関で使える。フェリーにも使える。

セブンイレブンでも使えるので Suica 性が高い。

aoitrip.jp

地下鉄

便利。しかし東京と特に変わらないのであまり面白くない。

バス

2階立てのやつ。2階に乗ると結構楽しい。冷房がやたら寒い。

値段的にはバス ≒ 地下鉄で、バスのが少しゆっくりめ。でも楽しい。

路面電車(トラム)

楽しい交通手段その1。お尻が痛くなるけど楽しい。ゆっくりだけど安い。

フェリー

楽しい交通手段その2。ふらっと離島に行ける。マカオにも行けるっぽい。

www.skygate.co.jp

空港 ⇄ 本島間の移動

Airport Express(地下鉄のはえーやつ)を使うとめっちゃ損するので絶対バスを使おうな。

通信手段

プリペイド SIM

Amazon で売ってる。安くて便利。

http://amzn.asia/d/ddWGSok

カルチャー

飲茶と粥と麺をやるといい。蓮香居はとてもおいしかった。

香港の伝統スタイル!ワゴン式飲茶 | Fish & Tips

お土産

ヌガーが安くてうまくてそこそこ数入ってて便利。空港で買った。

カルチャーショック

だいたいここに書いてある。

www.hongkongnavi.com

物価

あんま安いという感じはない。チェーン店が高めで個人でやってるお店は安いような気がした。

忘備録:LP 作る際の OGP 周り

Google Maps の埋め込みくらい地味に面倒な OGP 周りの設定である。
LP 作るときとかにサクサクやりたいので備忘録を書くのだった。

テンプレ

これを埋めるとよい。og:image は 1200 × 630 px で作る。URL は絶対パスで。

<!-- OGP -->
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:site_name" content="">

<meta property="fb:app_id" content="">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image:src" content="">

Facebook 云々

fb:app_id を取得する

https://hazimaru.jp/2054/
なぜ、こんなことに、、、
まぁ Google アナリティクスの Facebook シェアバージョンみたいな感じだと思うので特に設定しなくてもよい。

デバッガーにかける

https://developers.facebook.com/tools/debug/og/object/
デバッガー - 開発者向けFacebook

よくわからんがデバッガー増えた?

Twitter 云々

カードバリデーターにかける

https://cards-dev.twitter.com/validator

特に必須ではないがやると安心する。

忘備録:Google Maps をカスタマイズして Web サイトに埋め込みたい

Google Maps をカスタマイズして Web サイトに埋め込みたいだけなのによくわかんなかったから忘備録を作ります。忘備録なので雑です。

API キーの取得

API キーを取得する。この辺をわちゃわちゃやっていくと取れる。

nendeb.com

地図を表示する

ここのサンプルコードを改造していくのが個人的に早い。

https://developers.google.com/maps/documentation/javascript/tutorial

JSON でのカスタマイズ

JSON 形式でマップのスタイリングができる。initMap() のとこに突っ込めばいいっぽい。結局これが面倒なんだけど自分なりの定石を見つけてちゃんとまとめたいね…

取り急ぎ公式による概論とリファレンス読むのが早そう。

Start Styling your Map  |  Maps JavaScript API  |  Google Developers

Style Reference  |  Maps JavaScript API  |  Google Developers

 

ちなみに Styling Wisard は特に使いこなせていない。これもろもろの粒度めっちゃ荒くない?と思いつつ僕が使い方わかってないだけな気もしてよくわからん。

Styling Wizard: Google Maps APIs

 

あとは Google Maps のカスタマイズ集みたいなやつも見つけた。これ!っていうのは見つかりにくそうだけどいい感じのやつをベースに少し色合いをいじるとか、そういうのが早いかも。

https://snazzymaps.com/

マーカーを立てる

はい

Markers  |  Maps JavaScript API  |  Google Developers

Simple icons のとこ見るとマーカーの画像を変えるやつが書いてある。Complex icons のとこにマーカーのサイズとか位置とか変えるやつが書いてある。マーカーの画像は SVG だと微妙っぽい。

あとがき

そういや API キーなしで埋め込まれた地図は表示されなくなるらしい、こえー。