MB blog

こちらは主に自分用のメモです。

AWS lightsail インスタンスで root ユーザになる

Lightsail サーバでは root ユーザとしてログインすることができない。
厳密にいうと、root ユーザのパスワードは設定されていない。

通常ユーザで SSH ログインした後に、su で root ユーザに変更するのが唯一の root ログインの方法。

sudo su -

Divi テーマでヘッダーメニューを非表示にする

Divi テーマを使っていて、固定ページを使ってランディングページ(LP)を作る必要がありました。

LP は本サイトのコンテンツから独立させたいので、ヘッダー部分に表示されるサイトのメインメニューは消したいです。

 

固定ページの通常編集画面で、右カラムのページ属性>テンプレートを、「デフォルトテンプレート」から「Blank Page」に変更。

 

f:id:lake_michigan:20190528091659p:plain

 

更新して、ページを表示すると、、、

 

f:id:lake_michigan:20190528091831p:plain

 

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 > に追加する。」から入力することもできるので、その場合はわざわざ子テーマを作る必要がない。

参考
www.elegantthemes.com

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" が出てきているのを確認。

f:id:lake_michigan:20190513141802p:plain

このままだとサムネイルがありませんが、任意の880x660 の画像を divi-child フォルダのルートに配置することでサムネイルに反映させることができます。

3. ファイルの編集(カスタマイズ)

テーマをカスタマイズする際は、新たに追加した子テーマの方の style.css、function.php に追記していきます。
header.php の編集をしたいときは、親テーマの header.php をダウンロードしてきて、それをそのまま子テーマにアップします。

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 を直接編集することで、無事書き換わりました。

soma-engineering.com

ページの種別によって別のサイドバーを表示するための Wordpress プラグイン

ページごとに別々のサイドバー

Wordpress で、単純なブログサイトではなく、ブログも含まれる企業サイトだったり、EC 機能もブログも含まれたりしていると、サイドバーが1種類だけだと不便が出てきます。

例えば、ブログページのサイドバーには、ブログ記事のカテゴリや最新記事、人気記事を表示したいですが、EC のショップページでそれが表示されているのは違和感があります。

また、ECショップのトップでは、商品検索のためのフィルターが表示されていて欲しいですが、商品詳細ページでは、類似の商品や、よりカート追加を促進するために送料などを表示させたいですよね。

デフォルトの Wordpress だとサイドバーは全ページ共通の1種類しか作れませんが、論理的に別のサイドバーを作って、各ページの条件によって表示するサイドバーの種類を制御できる賢いプラグインを見つけました。

ja.wordpress.org

 使い方

Facebook 広告オーディエンスの重複を調べる

類似オーディエンスを作ったりしていると、オーディエンス間での重複がどの程度あるかが気になるので、チェックする方法。

広告マネージャの左上の三本線 > アセット > オーディエンス

重複を確認したいオーディエンスにチェックを入れて、テーブルの上部真ん中あたりにある「・・・」をクリックし、「オーディエンスの重複を表示」をクリック。

オーディエンスの重複を表示

すると、こんな感じでベン図で重複が表示されます。

ベン図

 

重複があまりに高い(40%〜)オーディエンスどうしをそれぞれ別なものとして扱うのは避けた方がよく、例えば変数に指定してABテストにかけたりするのは不毛。