AWS lightsail インスタンスで root ユーザになる
Lightsail サーバでは root ユーザとしてログインすることができない。
厳密にいうと、root ユーザのパスワードは設定されていない。
通常ユーザで SSH ログインした後に、su で root ユーザに変更するのが唯一の root ログインの方法。
sudo su -
Divi テーマでヘッダーメニューを非表示にする
Divi テーマを使っていて、固定ページを使ってランディングページ(LP)を作る必要がありました。
LP は本サイトのコンテンツから独立させたいので、ヘッダー部分に表示されるサイトのメインメニューは消したいです。
固定ページの通常編集画面で、右カラムのページ属性>テンプレートを、「デフォルトテンプレート」から「Blank Page」に変更。
更新して、ページを表示すると、、、
Voila!! メニューが消えました〜。LPっぽくなりましたね。
Divi で Adobe Fonts(旧Typekit)を使う!
Divi と Adobe Fonts(Typekit)
Divi ではデフォルトでたくさんフォントが使えるようになっていますが、日本語フォントは弱い...。
Google Fonts の日本語フォントも使えるのですが、いまいちバリエーションが少なく。
ちなみにデフォルトで Divi の日本語版で使われるのは Noto Sans なのですが、こちらも劇的に重くて有名。
そこで、 Divi で、もっとも優れたウェブフォントサービスである Adobe Fonts を使ってみました。
ちなみに、Adobe Fonts を簡単に使うための有名なプラグインはあるのですが、当記事を書いている時点でサポートしている Wordpress バージョンが 4.2 ということで、こちらは使わず主導で導入します。プラグインの管理大変ですしね。
wordpress.org
Divi テーマで Adobe Fonts を使えるようにする手順
0. Adobe Fonts で Web フォントプロジェクトを作っておく
fonts.adobe.com
お気に入りのフォントを、マイ Web プロジェクトに追加しておきます。
詳細は割愛。
1. Divi 子テーマを作る
header.php をさわるので、子テーマを作っておきます。
lake-michigan.hatenablog.com
2. header.php に Typekit コードを挿入
Adobe Fonts の マイ Web プロジェクト の「プロジェクトの埋め込み」に表示されているスクリプトをコピーする。
Wordpress 管理画面から、外観 > テーマエディターで子テーマの header.php を開く。
3. CSS にフォントを指定
管理画面の Divi メニュー > テーマのオプション > カスタム css に、フォントの指定を追記します。
ちなみに私はグローバルなデフォルトフォントを設定したくて、以下のようにアスタリスクで指定していたのですが、
* { font-family: fot-tsukuardgothic-std, sans-serif; font-style: normal; font-weight: 400; }
これだとなぜか見出しテキスト(H1〜H6)に反映されず...
デフォルトのCSSに倣って以下のように指定することで、見出しでも使えるようになりました。
body, h1, h2, h3, h4, h5, h6, input, textarea, select { font-family: fot-tsukuardgothic-std, sans-serif; font-style: normal; font-weight: 400; }
追記
に typekit スクリプトを追記するだけであれば、左ペインの Divi > テーマのオプション > 「統合」タブ > 「コードをブログの < head > に追加する。」から入力することもできるので、その場合はわざわざ子テーマを作る必要がない。Divi の子テーマを作る方法
Divi テーマをカスタマイズするので、子テーマを作った際のメモです。
親テーマを直接カスタマイズしてしまうと、バージョンアップの際などの対応が非常に面倒なので、カスタマイズをするのであれば子テーマが必須となります。
1. wp-content > themes の下に、 "divi-child" という新規フォルダを作成し、そのルートに以下の2ファイルを作る。
style.css
/* Theme Name: Divi Child Theme Theme URI: https://www.elegantthemes.com/gallery/divi/ Description: Divi Child Theme Author: Elegant Themes Author URI: https://www.elegantthemes.com Template: Divi Version: 1.0.0 */ /* =Theme customization starts here ------------------------------------------------------- */
Theme URL, Description, Author などは自由に変更してOK
functions.php
<?php function my_theme_enqueue_styles() { $parent_style = 'divi-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?>
2. 子テーマの有効化
ワードプレス管理画面に戻り、「外観」 --> 「テーマ」に Divi に加えて "divi-child" が出てきているのを確認。
このままだとサムネイルがありませんが、任意の880x660 の画像を divi-child フォルダのルートに配置することでサムネイルに反映させることができます。
AWS Lightsail 上の Wordpress を SSL 化
ずっとサボっていた、Lightsail で作った Wordpress サイトの SSL 化に、重い腰をあげて対応しました。
こちらの記事が非常に丁寧にまとまっていたので、ほぼそのままできました〜。感謝!
www.karelie.net
一点、lego を落とす curl コマンドに L オプションをつけなければそのままでは動かずでした。
curl -sL https://api.github.com/repos/xenolf/lego/releases/latest | grep browser_download_url | grep linux_amd64 | cut -d '"' -f 4 | wget -i -
上記のあと、Wordpress の管理画面(「設定」メニュー)に表示される Wordpress アドレス (URL) とサイトアドレス (URL) を修正しようとすると、グレーがかって編集できないようになってしまっていました。
こちらを参考に、wp-config.php を直接編集することで、無事書き換わりました。
ページの種別によって別のサイドバーを表示するための Wordpress プラグイン
ページごとに別々のサイドバー
Wordpress で、単純なブログサイトではなく、ブログも含まれる企業サイトだったり、EC 機能もブログも含まれたりしていると、サイドバーが1種類だけだと不便が出てきます。
例えば、ブログページのサイドバーには、ブログ記事のカテゴリや最新記事、人気記事を表示したいですが、EC のショップページでそれが表示されているのは違和感があります。
また、ECショップのトップでは、商品検索のためのフィルターが表示されていて欲しいですが、商品詳細ページでは、類似の商品や、よりカート追加を促進するために送料などを表示させたいですよね。
デフォルトの Wordpress だとサイドバーは全ページ共通の1種類しか作れませんが、論理的に別のサイドバーを作って、各ページの条件によって表示するサイドバーの種類を制御できる賢いプラグインを見つけました。
使い方
Facebook 広告オーディエンスの重複を調べる
類似オーディエンスを作ったりしていると、オーディエンス間での重複がどの程度あるかが気になるので、チェックする方法。
広告マネージャの左上の三本線 > アセット > オーディエンス
重複を確認したいオーディエンスにチェックを入れて、テーブルの上部真ん中あたりにある「・・・」をクリックし、「オーディエンスの重複を表示」をクリック。
すると、こんな感じでベン図で重複が表示されます。
重複があまりに高い(40%〜)オーディエンスどうしをそれぞれ別なものとして扱うのは避けた方がよく、例えば変数に指定してABテストにかけたりするのは不毛。