Twitter でシェアするボタンの作成方法をご紹介します。
シェア
Twitter Publish から Twitter Buttons でコードを取得できます。
リンクタグを使用して Twitter へのツイートリンクを作成する方法もあります。
<a href="https://twitter.com/share?text="入れたい文字列">Twitterでツイート</a>このように https://twitter.com/share にパラメータを付与すればツイートリンクを作成することができます。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
WordPress へユーザーを CSV で一括インポートするには、「Import Users from CSV」が便利です。
ユーザーに紐づくメタ情報付きで、ニックネームやパスワードなどを一気に登録できます。
ユーザー > Import users from a CSV file から管理画面を表示します。
CSV のインポートはこちらから行うことができます。
管理画面にサンプルファイルがあるので、そのファイルに合わせて試してみるとよいでしょう。
「Import Users from CSV」ではいくつかインポートの設定があります。
Notification にチェックを入れると、追加したユーザーにメールが送信されます。
ユーザーを一括登録するには十分動作します。
便利なプラグインと言えるでしょう。
このプラグインは、Notification のチェックでメール配信が行われます。
しかしメールが英語なので、使い勝手としてはいまいちです。
user 名が重複するとエラーになるので注意が必要です。
インポート前に重複を確認しましょう。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
CSV を import するためのプラグインです。
表示は「Import and Export WordPress Data as CSV or XML」となっています。
プラグイン WP Ultimate CSV Importer を有効にしたら、CSVをアップロードしてみましょう。
「Import each record as ~」 とあるので投稿タイプを選択します。
ページやカスタム投稿タイプなど選択できるので便利です。
| フィールド | 説明 | CSVのサンプル |
| post_title | タイトル | |
| post_content | コンテンツ | |
| post_excerpt | 要約 | |
| post_date | 日付 | |
| post_category | カテゴリー | |
| post_tag | タグ | |
| post_author | 投稿者 | |
| featured_image | ||
| post_slug | スラッグ | |
| post_status | 公開ステータスの指定 publish / draft / pending / sticky / private / protected を指定する | publish |
| post_format | 投稿形式の選択 |
有料でない場合、ユーザーの Import には対応していないようです。
CSV のプラグインこれ一本で行きたい場合は課金しても良いでしょう。
Introduction for WP Ultimate CSV Importer Free and all premium bundles
Post, Page & Custom Post Import | Ultimate CSV Importer
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
WordPress で ショートコードを追加するためには、add_shortcode() を使います。
設定は functions.php に書きましょう。
ショートコードを使えば例えば WordPress のコンテンツ内で PHP のコードを実行させるような動作が容易になります。
タグの記法がいくつかあります。
タグでコンテンツを挟むタイプを基本と考えておくと良いです。
[tag]コンテンツ[/tag]タグでは属性を扱うことができます。
[tag hoge="属性値"]コンテンツ[/tag]属性でパラメータを設定することで柔軟な設定が可能です。
構文は以下になります。
<?php add_shortcode( $tag , $foo ); ?>前の引数 $tag とあるものがショートコードになります。
関数側はこんな感じで引数やコンテンツを受け取ることができます。
function foo( $atts, $content = "" ) {
return 'content = $atts["bar"] . $content';
}
add_shortcode( 'tag', 'foo' );関数リファレンス/add shortcode – WordPress Codex 日本語版
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の点数改善で、Twitter のウィジェットを削除した場合の点数を比較しました。
Twitter のウィジェットとは以下のようなものです。
Twitter Publish からウィジェットを作成してウェブサイトに貼り付けることができます。
しかし、Twitter ウィジェットは PageSpeed との相性がよくありません。 PageSpeed で指摘される様々なポイントが、Twitter ウィジェットとぶつかります。
試しに、Twitter ウィジェットを削除してみましょう。
どれくらいの影響があるのかその上でウィジェットの利用の参考にすることができます。
削除前はモバイル版で、80点でした。
削除後はモバイル版で、89点でした。
モバイルで+9点の改善となりました。
Twitter ウィジェットを削除してもデスクトップ版への影響はありませんでした。
Twitter のウィジェットを削除すると、PageSpeed で指摘される項目が減ったり変化しました。
ページの表示を遅延させる要素が減少して、表示速度が改善したということになります。
以下の項目は PageSpeed で表示されなくなりました。
５項目が削除されているので、多岐に渡り効果が出ています。
以下の項目は PageSpeed で変化がありました。
リクエスト数が74から25に減少しました。
今回 Twitter のウィジェットを削除してみたところ、PageSpeed のモバイルで9点の改善となりました。
また、前後比較により削除されたり変化した項目を見ると、Twitter ウィジェットのように外部通信するウィジェットが表示のパフォーマンスに大きな影響を与えていることがわかります。
PageSpeed 視点では Twitter ウィジェットはネガティブに働きますが、Twitter ウィジェットの有効活用を目指しているケースもあるはずです。
ケースに合わせ Twitter ウィジェットの利用を検討ください。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
無料で使えるブログサービス Tumblr は会社のホームページや法人のウェブ拠点として適していないと考えています。
当記事では、Tumblr が会社ホームページとして適していない理由をご紹介します。
Tumblr はマイクロブログサービスと言われ、様々なコンテンツ投稿が可能なサービです。
無料で使え、独自ドメインにも対応しているために、会社ホームページや法人のオウンドメディアポートフォリオサイトとして利用している方も多くいらっしゃいますね。
ユーザー数もサービス開始以降伸びている人気のサービスです。
Tumblr の機能を簡単にご紹介します。
大まかですが、こんな感じです。
Tumblr はテーマがカスタマイズ対応しているので、ブログ機能に留まらず、会社ホームページなどちょっとしたウェブの拠点にすることができます。
さて、本題の Tumblr が会社ホームページや法人拠点に適しているかですが、現在のところ全く向いていないと考えています。
向いていない理由を3点挙げます。
Tumblr はリブログという Facebook でいうシェアや Twitter のリツイートのような拡散機能があります。
ただ、基本的にこのようなシェア機能は法人コンテンツと相性がいまいちですし、Tubmlr のユーザー数でしたら、拡散は他の SNS に期待した方が良いと考えています。つまり、積極的に Tumblr をビジネス使う理由が無いのです。
Tumblr の管理画面は、WordPress などに比べるとかなり貧弱です。
会社ホームページでしたら、例えば過去のリリース投稿を編集したくなったりします。しかし、そういう際に Tumblr は過去の投稿を一覧にして編集可能な管理画面がありません。一応投稿の編集自体はできるのですが、投稿数が多くなるとかなり手間となります。
正直、ビジネスの効率性の観点からは全くお勧めできません。
ユーザー管理もできませんのでセキュリティの視点からビジネス用途として疑問です。
一応テーマの編集はできるのですが、開発環境を用意できないなど拡張性に乏しくできることは限られています。
Tumblr は将来が不透明な状態にあります。
世界最大のポルノサイトが成年向けコンテンツを禁止したTumblrを買収したがっている – GIGAZINE
このような記事にあるように、元々 Tumbrl は米国のヤフーに1200億で買収されたと後に、0円評価となり、現在は Verizon 参加となっており今後は不透明です。
先が読みにくい不透明なプラットフォームに会社ホームページなど法人の拠点を置く積極的な理由は無いと考えています。
当記事では、Tumblr は法人のウェブの拠点として積極的にお勧めできない理由をまとめました。
Tumblr で会社のホームページを開設してしまったものの、WordPress に移行したいという方は多いかもしれません。
当社では Tumblr からの WordPress 移行をにも対応しています。
ご興味のある方は、お問いあわせよりご連絡ください。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の表示で、「ウェブフォント読み込み中のテキストの表示」をせよと指示されるケースの対策です。
この表示される理由は、ウェブフォントのロードによりページ表示の遅延になっているためです。
近年では、fontawesome や googlefont など woff2 フォントが原因となり、この指摘が出てしまうケースが多いのではないでしょうか。
ウェブフォントが原因の遅延対策としては、二つご紹介します。
CSS を利用する場合はの @font-face を指定してフォントを遅延読み込みさせます。
CSS を編集して @font-face に swap を設定します。
ただ、今回指摘された箇所は WordPress プラグイン内の CSS でした。ですので、 WordPress プラグインの CSS に対して直接 @font-face を指定しました。
まずはプラグインの該当 CSS を見てみます。
@font-face{font-family:ez-toc-icomoon;src:url(fonts/ez-toc-icomoon.eot?-5j7dhv);src:url(fonts/ez-toc-icomoon.eot?#iefix-5j7dhv) format('embedded-opentype'),url(fonts/ez-toc-icomoon.ttf?-5j7dhv) format('truetype'),url(fonts/ez-toc-icomoon.woff?-5j7dhv) format('woff'),url(fonts/ez-toc-icomoon.svg?-5j7dhv#ez-toc-icomoon) format('svg');font-weight:400;font-style:normal}実際にこちらがロードされているコードです。フォントが複数指定されています。
@fon-face に font-display の swap を追加します。
@font-face{font-family:ez-toc-icomoon;src:url(fonts/ez-toc-icomoon.eot?-5j7dhv);src:url(fonts/ez-toc-icomoon.eot?#iefix-5j7dhv) format('embedded-opentype'),url(fonts/ez-toc-icomoon.ttf?-5j7dhv) format('truetype'),url(fonts/ez-toc-icomoon.woff?-5j7dhv) format('woff'),url(fonts/ez-toc-icomoon.svg?-5j7dhv#ez-toc-icomoon) format('svg');font-weight:400;font-display: swap;font-style:normal}プラグイン の CSS を上書きして swap を追加しました。
swap の設定前はデスクトップ版で、91点でした。
デスクトップ版の swap ありの点数です。
僅かですが PageSpeed の点数が改善しました。
「ウェブフォント読み込み中のテキストの表示」の表示が消えました。
ウェブフォントをそもそも消してしまうというのもありです。
あまり環境に左右されずに対応できます。
<link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">例えばこういうフォントの読み込み表示を丸ごと削除します。
削除後のモバイルの点数は+3点となりました。
モバイルでの点数改善は大きいですね。
デザインに左右されないフェーズでしたら、思い切って削除もありというスタンスです。
「ウェブフォント読み込み中のテキストの表示」に対する対策として二つの対策をご紹介しました。
CSS の swap 読み込みは、「過大なネットワーク ペイロードの回避」対策 でも有効な方法です。
また、ウェブフォントの使い所にもよりますが、削除するのも高速化の選択肢として有力だと考えています。ゴールやフェーズに合わせて意思決定をしていきたいです。
PageSpeed で「ウェブフォント読み込み中のテキストの表示」が指摘された際には点数改善が期待できますので対応するべきポイントでしょう。
Ensure text remains visible during webfont load
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
スクリプトタグやメタタグを出力するには、wp_head() を使用します。
スクリプトタグを出力したいテーマないの場所（head タグ内）で、wp_head()をよびます。
<?php wp_head(); ?>基本的にページで一度だけ呼び出します。WordPress で wp_head() を削除すると動作に支障が場合があります。
また、wp_head() には引数がありません。
従ってカスタマイズしたい場合は、functions.php に記述することになります。
内容を追加する場合は、functions.php で add_actionを使います。
以下の例では、style タグを追加しています。
add_action( 'wp_head', 'add_style_tag' );
function add_style_tag() {
echo "<style> .wp_head_class { background-color : red; } </style>";
}wp_head() に出力されるコードを編集するには、functions.php に add_filter でスクリプトに追加するコードを書くのがよくあるやり方のようです。
if (!(is_admin())) {
function add_attr_for_style($url) {
return 編集処理;
}
add_filter('clean_url', 'add_attr_for_style', 10, 1);
}style タグに属性を追加するようなパターンですね。
関数リファレンス/wp head – WordPress Codex 日本語版
プラグイン API/アクションフック一覧/wp head – WordPress Codex 日本語版
clean_url | Hook | WordPress Developer Resources
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights で、「静的なアセットと効率的なキャッシュ ポリシーの配信」をせよと指示されるケースの対策と改善手法です。
キャッシュのTTL が None になっています。
アセットにキャッシュが設定されていないことがわかります。アセットとは画像や、CSS、JavaScript などのファイルと考えてください。
WordPress などウェブサイトを使っている想定した場合、キャッシュポリシーを設定することが対策となります。
Apache を利用している、あるいは .htaccess 記法が使えるレンタルサーバーで WordPressを利用している際に通常利用できる手法をご紹介します。
Apache などの Web サーバーでは Expires 指定をしてキャッシュすることができます。キャッシュの指定は PageSpeed に影響があり表示速度改善が期待できます。
具体的なキャッシュの指定はウェブサーバーに合わせた指定にしてください。
Apache を利用しているレンタルサーバーなどは、.htaccess に記述すればキャッシュの Expires の指定を追加できます。
<IfModule mod_rewrite.c>
ExpiresActive On
ExpiresDefault "access plus 1 days"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType text/css "access plus 30 minutes"
ExpiresByType text/javascript "access plus 10 hours"
ExpiresByType application/javascript "access plus 10 hours"
</IfModule>PageSpeed の指摘では JavaScript や画像が出ていたので、画像や JavaScript、CSS を追加します。
再度 PageSpeed Insights を確認します。
相変わらず「静的なアセットと効率的なキャッシュ ポリシーの配信」という項目は表示されています。
しかし、キャッシュの TTL None の項目が消えています。
また、赤い▲だった表示が、黄色い■アイコンになりました。
Expires の設定前はデスクトップ版で、90点でした。
デスクトップ版のキャッシュありの点数です。
90点から94点となり+4点の変化となりました。
モバイル版では点数の変動はありませんでした。
大きなポイントではないかもしれませんが、キャッシュ指定は忘れず対応したい設定です。
mod_expires – Apache HTTP サーバ バージョン 2.2
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の表示で、「オフスクリーン画像の遅延読み込み」をせよと指示されるケースの WordPress での対策です。
オフスクリーンとは、画面に表示されない部分ということで、表示されない画像のロードを遅れてロードせよという指示になります。
この記事では、WordPress の対策をメインにご紹介します。
WordPress では遅延ロードに対応したプラグインを使いましょう。
WordPress の画像遅延読み込みには、lazy load プラグイン を使えと PageSpeed の指示があります。
今回は、Autoptimize – WordPress plugin を使ってみます。
WordPress 以外の場合は、JavaScript の Lazy-load プラグインを使うといいでしょう。
プラグイン Autoptimize をインストール＆有効化してください。
設定 > Images と進みます。
ここから Lazy-load images? にチェックを入れます。
「Lazy-load images?」にチェックを入れて 変更を保存 を押せば設定は完了です。
PageSpeed Insights を確認して「オフスクリーン画像の遅延読み込み」という記述が消えていれば OK です。
Autoptimize プラグインなしでは、モバイル38点でした😇
Autoptimize ありではモバイルで点数が改善です。
モバイルで、5点の改善となりました😁
改善の点数はわずかですが、モバイルの点数改善は難易度が高めなので、対応したい項目です。
プラグインを入れるだけなので WordPressは やりやすいですね。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。