ツイートをWordPress記事に埋め込む

TwitterのツイートをWordPress記事に埋め込むソースの取得方法。

WordPressの場合、ソースを取得せずとも、ツイートのリンクを貼るだけで自動表示される。
しかし、その方法だとWordPressの仕様まかせだし、当方の環境では表示されない場合がかつてあったので、ソース埋め込み方法のみを今回は考える。

基本的方法

方法は二通りある。

①一つはツイッター(ウェブサイト)から直接取得する方法。
該当ツイートを開き「ツイートをサイトに埋め込む」を押せば取得できる。
なお、この方法はパソコンで有効。

②もう一つは別サイト(https://publish.twitter.com/#)に、url入力して取得する方法。
別サイトを開き、該当ツイートのurlを入力し実行。
次に「カスタマイズオプション」のリンクをクリック。
言語を日本語に選び更新。
ここまで進めてから、コードをコピーして取得。
なお、この方法はパソコンでもスマホ(android)でも有効。

どちらが有効か

①と②のソースはほぼ同内容です。
投稿日現在、WordPress記事に入力すると自動フォーマットされ完全に一致した。
だからどちらでもいいわけだが、スマホ(android)でも編集する場合は、②の方法が自然と言えるかもしれない。
日本語の言語指定をすべきと考える。

Twitterカードを設定してみた

Twitterカードでヴィジュアル化すれば、クリック率が上がる。
Twitterアカウントを予め作っておく。

今回は、プラグイン「All in One SEO Pack」の使用を前提とする。
「All in One SEO Pack」→「機能管理」。
「ソーシャルメディア」で、Activateと表示されているならクリックする。
結果的には、Deactivateと表示変更させる。

「All in One SEO Pack」→「機能管理」→「ソーシャルメディア」。
当サイトではTwitterボタンはコードを直接入力している。
今回の各設定もそれが前提です。

ホームページ設定

「AIOSEOのTitleとDescriptionを使用する」のチェックを任意で選択。
今回はチェックを入れた。

その他の設定は入力しなかった。説明も割愛します。

Twitterプロフィール画像をTwitterカードに使用

次は「画像設定」です。
記事ごとに画像を用意するのが面倒なのでTwitterプロフィール画像をデフォルトにする事にした。
Twitterでアップした画像を、WordPressにもアップする。

  • 「デフォルトのOG:Image」のボタンをクリックして画像をアップする。
    成功すれば、ボックスにアップされた画像のurlが表示されます。
  • 「画像が見つからない場合はデフォルトを使用」にチェックを入れる。
  • 一番上の「OG:Imageソースを選択」だが、セレクトボックスが英語表示だった。
    Chromeでページごと翻訳する。
    今回は「コンテンツ内の最初のイメージ(First Image in Content)」を選択した。

その他の設定は入力しなかった。説明も割愛します。

Twitter設定

「デフォルトTwitterカード」は「要約」を選択。
Twitterプロフィール画像をデフォルトに設定したので、小さめの「要約」にした。

当サイトではTwitterボタンはコードを直接入力している。
その他の設定は入力しなかった。説明も割愛します。

Card validator で確認する

確認用サイトへ移動する。
Card Validator | Twitter Developers

任意の個別ページのurlを入力し、プレビューを確認して終了。
プレビュー反映に時間がかかる場合があるようだ。

他の方法はあるか(余談)

プラグイン「Twitter」は、Twitterが提供するプラグイン。
プラグイン「Twitter」でも「Twitterカード」が利用できるようだが、「All in One SEO Pack」の「ソーシャルメディア」の方がはるかにわかりやすい。
プラグインの「Twitter」と「ソーシャルメディア」の併用は、現時点では問題がないように見える。
プラグインの「Twitter」は、埋め込みツイートのカスタマイズ目的で導入しているが、将来は使用しないかもしれない。

Twitterボタンを設置する

今回は共有ボタン(シェアボタン)を作る。

https://publish.twitter.com/#

ボタン作成の公式サイトを利用する。
元は英文のようだがChromeで翻訳して問題は生じなかった。

Twitterボタンを選択。
共有ボタンを選択。
「カスタマイズオプションを設定する。(set customization options)」のリンクをクリック。
そのページでボタンをカスタマイズできる。

カスタマイズの一例。

自分に通知させる

誰かがツイートした時に、自分に通知させる事ができる。
「スクリーンネームを含める」のボックスにスクリーンネームを記入。
スクリーンネームとは「@~」のようなユーザー名の事。
パラメータは、data-via。

フォローを促す

ツイートした人に、フォローも薦めてくれる。
「アカウントを推薦」のボックスにスクリーンネームを記入。
パラメータは、data-related

コードをペーストする場所

決定するとコードが表示されるのでコピーし任意の場所にペースト(貼り付け)します。
WordPressで個別記事に該当する場所にペーストする。
場所はcontent-single.php。「template-parts」→「content-single.php」。

robots.txt ざっくり手順

robots.txtをGoogleに登録する手順。
すぐにGooglebot等がrobots.txtを認識しない場合がある。

robots.txt テスター

「Search Console」でまず該当サイトを開く。
「クロール」→「robots.txt テスター」。
まずは、公開済みのrobots.txtを表示し、その内容を確認する。
その「公開済みのrobots.txtのページ」は、チェックの度にブラウザ更新が必要。

robots.txtの編集等が必要であることを確認して、新規にrobots.txtを作成しアップする。
上の要領で、ファイルアップ成功をチェック。

「robots.txt テスター」の送信。
3番の「Googleに更新をリクエスト」を送信。
Googlebot等が、新規robots.txtの認識に成功すれば、「robots.txt テスター」のテキストエリアに反映される。

xmlサイトマップ登録

xmlサイトマップのurlをrobots.txtの末尾に記入する。
そのurl記述の上に空行を一行、入れねばならない。

Sitemap: https://~/sitemap.xml

しかし、xmlサイトマップの登録は別に必要なようだ。
「Search Console」で登録可能なので、ついでに登録しておこう。

WordPress Popular Posts 久しぶりに再設定

記事をランキング表示してくれるプラグイン。

とりあえず以下のサイトを参考にして設定した。
https://hisagawanet01.com/wordpress-popular-posts/

ウィジェットでの設定

外観→ウィジェット。

投稿タイプ?
調査中。

カテゴリーを除外することができる。
カテゴリーIDの前に半角マイナス記号(-)を加える。
カンマ(,)で区切る。
-123,-456,-789

ID指定のurlでリンクする方法

すでに設定されているIDが、記事またはカテゴリーとして機能しているか。
つまりリンク先が削除されていないか。

投稿ページIDの一例。
https://grewja.com/?p=4398

カテゴリーIDの一例。
https://grewja.com/?cat=46

参考。
http://wpdocs.osdn.jp/%E6%8A%95%E7%A8%BF%E3%80%81%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%80%81%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF

FFFTP 文字コードの設定

WordPressでファイルを直接編集しアップする作業が必要になった。
FFFTPで、文字コードの設定を行った。
文字化けや停止を避ける目的。

環境はWindows。
編集にはTeraPadを使用し、メモ帳は使用しないことを前提にする。

設定

「ローカルの漢字コードの設定」を行う。
オプション→環境設定→転送4。
UTF-8(BOMなしの方)にした。

「ホストの漢字コードの設定」を行う。
ホストを選び、ホストの設定→文字コード。
ホストの漢字コードは無変換にした。
ファイル名の漢字コードはUTF-8にした。

追記

TeraPadで編集しアップしたが問題は生じなかった。
TeraPadでの文字コードの選択には注意が必要です。

今回は、理由付けなどの説明はしません。
結果オーライ、あとは自己責任でよろしく。

初めてのサーバ移転で画像紛失

WPXレンタルサーバ使ってたけど、高いのでWPXクラウドに引越しすることにした。
サーバ移転は初体験。

バックアップデータを取得しとけば、ひどい目には合わないだろうと思ったら甘かった。

.htaccessファイル?
未だに使ったことないので無視することにした。

問題は、wp-contentフォルダのダウンロード。
これを省略してはいけなかった。
画像ファイルとプラグインを失ったようだ

そこだけ注意して。
以上、超初心者向け情報でした。

クォーテーション等が自動変換される件

WordPressで記事投稿する際、半角ダブルクォーテーション(")は全角()に変換される。
その他、シングルクォーテーションなどを、勝手に自動変換して表示される。

"a"」→「“a”
'b'」→「‘b’
<!--comment-->」→「<!–comment–>

この自動変換機能は、コード等の説明をする際には迷惑な機能だ。

自動変換する理由

自動変換機能が何故ついているのかは不明だ。
セキュリティ上の配慮かとも考えたが、英語圏でも利用されるから、その可能性は低そうだ。
という事で、この機能はストップさせた方がよさそうだ。

自動変換機能を停止する方法

加筆する場所はfunctions.php。
末尾にでも、以下のように追加すればよい。

// 自動変換停止
add_filter('run_wptexturize' , '__return_false');

codeタグで回避

このクォーテーション等を自動変換する機能は、codeタグまたはpreタグで括る事によっても回避が可能だ。
テーマ更新等でファイル書き換えを余儀なくされる事もあろうから、codeタグ等を適宜利用する習慣を持ったほうがいい。

この自動変換機能を知らなかった方は全角クォーテーション等が使われていないかチェックした方がいい。
WordPressの検索機能で調べることができる。
ちなみに全角クォーテーションは、ダブルとシングル、左と右、計4種類ある。

Optimize Database after Deleting Revisions

WordPressのデータベースの最適化およびリビジョンの削除を行う。
軽量化した分、表示が早くなるらしい。

英語なので、設定項目の意味がわかりにくい。
以下のサイトを参考にした。
https://chucco.com/wordpress-revision/

設定

ざっくり説明。自己責任で。

上半分の設定。

  • postチェック。pageチェック。
  • Delete revisions older than。
    ゼロ設定。
  • Maximum number of - most recent - revisions to keep per post / page
    リビジョンを残す数。ゼロ設定。
  • Delete transients。
    初期設定「DELETE EXPIRED TRANSIENTS」がいいかも。
  • Optimize InnoDB tables too。
    チェック。
  • Keep a log。
    チェックなし。
  • Scheduler。
    NOT SCHEDULED。
    事前にバックアップをとるべき。
  • 他の項目はチェックなし。

下半分の設定は、初期設定のままノーチェックにした。
「Save Setteings」で保存。

実行

事前にバックアップをとるべき。
「Go To Optimizer」→「Start Optimization」で実行。

検索結果を全文表示・抜粋表示

検索結果を全文表示・抜粋表示を編集して変更する。

場所

修正場所を考えてみる。
検索結果を表示させるのは、search.phpのようだ。
そのsearch.phpにある、get_template_part関数が修正すべき場所を指定している。

get_template_part( 'template-parts/content', 'search' );

このコードの意味は、「template-parts/content-search.php」が存在すれば「template-parts/content-search.php」、なければ「template-parts/content.php」が該当場所である、という意味だと思われる。

the_contentとthe_excerpt

the_content関数が全文表示、the_excerpt関数が抜粋表示。

ここからは実際の編集だが、ある程度はソースを読む必要がある。
今回は抜粋表示から全文表示に変更する。
「the_excerpt」を検索したが二箇所ある。どちらを修正すべきか。

if ( is_search() ) ~

これは「検索ページなら」という条件文。
この「if」範囲内に、「the_excerpt」は一つのみ存在を確認された。
そのthe_excerptを修正すればよい。

 

<?php the_excerpt(); ?>

以下のように修正した。

<?php //全文表示に the_excerpt(); ?>
<?php the_content(); //全文表示に ?>

以上です。

Batch Cat カテゴリーを一括して外す

日頃はオフでもよい。

使い方

「設定」で表示件数を多めにしておく。
「ツール」から実際のカテゴリー操作を行う。

下段にボタンがあり、「Set」は移動、「Add」は追加、「Drop」は削除(カテゴリーから外す)。
「Add」機能に関しては、WordPress標準機能として存在するため使用しないものと考えてもいい。

セレクトボックスでカテゴリーを選択し「Search」ボタンをクリック。
対象記事にチェックを入れる。
カテゴリー一覧から、はずしたいカテゴリーを選びチェックを入れる。
「Drop」ボタンを押します。

未使用 後日の宿題

関数が定義済みかどうか

if (function_exists( 'sparkling_posted_on' )) {~;}

多次元配列のソート

多次元配列の定義、よくわからない。
番号が振ってないということかな?
配列の配列であるいうことは間違いなさそうだ。

2次元配列と3次元配列の違いは、配列の中にある配列の要素数??が2と3の違い。
用語がよく分からん。
あとで調べておきます。

array_multisort()というのがソートできて便利らしい。

Breadcrumb NavXT

「Breadcrumb NavXT」はパンくずリストで構造化を促すプラグイン。

インストールするだけではだめで、テーマ編集から、コードを直接記入しないと動作しない。
記入コードですが、設定→ヘルプ→クイックスタートと進めば、記入例が載っています。
例えば以下のように書きます。

<!--Breadcrumb NavXT-->
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<?php if (function_exists('bcn_display')) {bcn_display();} ?>
</div>
<!--Breadcrumb NavXT--><!--end-->

個別記事への記入場所

個別記事に記入しないと、話にならないです。
自分は先頭ではなく、試しに記事の末尾に記入することにしました。
となると個別記事本文を扱う場所を探さねばなりません。

場所はcontent-single.php。「template-parts」→「content-single.php」。

カテゴリーなどへの記入場所

カテゴリー記事へは記入することも可能。
例えばタイトルと本文の間、つまり閉じたheaderタグの次に記入。

当方では、archive.phpが該当する。

未確認な記述法

一行コメント

<?php //コメント ?>
この記述はあり。解決。

ifと一文

<?php if (true) hoge(); ?>
一文なら{}は不要。解決。
もちろん付してもいい。

ファイル末尾は省略できる?

<?php
~

これで終了して、?>で閉じてないのを見かけたんだが。
ファイル末尾だと省略していいのかな?

endif

endifを含まない

基本形。

<?php
if (~) {~;}
?>

endif必須

例えば以下のように{}を使わない書き方がある。
{}を使わない場合は、endifが必須だと思う。
endifで条件文は終了だけど、その後に続けて記入しても当然に構わない。

<?php if (~) : ?>
「この部分にHTMLソースを記述できる。echoなしで出力される。」
<?php endif; echo 'hello'; ?>

コメント欄をまとめて非表示にする

One Click Close Comments

まさにワンクリック、コメント欄の表示・非表示を切りかえる。
これは簡単、インストールするだけ。
投稿一覧に移動し、色の付いた丸をクリックして変更。

カテゴリーごとにコメント許可の変更

WordPressの標準機能。
投稿一覧で一括編集することが可能です。

WordPressのリンクのパス(url)の書き方

三つに分類

  • 絶対パス。
    「https://~」。
  • ルート相対パス。
    ルートから記述する。ルートは一番上ということ。
    「/category/~」。
  • 相対パス。
    説明割愛。ややこしいだけ、使わない方がいい。

画像へのリンク

リンク挿入機能で、推奨されるリンクテキストを一旦は生成しておく。
絶対パスからルート相対パスへ変更する。

内部リンクはルート相対パス

基本的には、内部リンクはルート相対パス。
リンク切れの確率が下がる。
さらにリンク切れ対策プラグインを導入したい。

ブログカードは多用すべきではない?

WordPressで標準で用意されているブログカードについて。
絶対urlでないと表示されない仕様です。
プラグインでリンク切れチェックができないので、リンク切れしない工夫が必要。

「https://~.com/?p=123」のようにidで指定するといいです。
これはパーマリンクの種類に関係なく使用できると思う。

この時に、画像や通常の内部リンクをルート相対パスに指定しておくと都合がいい。
つまり記事検索で「https://~.com/」と調べれば、ブログカード使用記事だけ選出できますね。

このブログカード、通常の内部リンクとは違うので管理しにくく、あまり多用すべきではないのかもしれない。

 

スラッグとローマ字

カテゴリーのスラッグとかでローマ字を使用するときがある。

方式

ヘボン式。訓令式。日本式?

ヘボン式はパスポートに使われる。
訓令式は内閣が公布したらしい。

さて何れを使用すべきであろうか。
訓令式が簡単なので、一度はこれを使用した。

しかし、今はこれでいいのか?と迷っている。
というのは、地名、例えば駅で見る駅名にはヘボン式が使われてるよね。
地名とか人名のスラッグを作ろうと思えば、ヘボン式のほうがしっくり来るような気もする。
検索したら、外人が発音しやすいのはヘボン式なのだそうだ。

でもヘボン式って難しいんだよね
う~ん、これは悩ましい。
今思うのは、スラッグはできるだけ英語にするのがいいだろう、ということだけだ。

訓令式に関して、少しメモします。
別に推奨しているわけではないです。

訓令式(頻度高)

  • ンは一字、n。
    ただしnyの時はどうしたものか。
    調査中。
  • シは、si。
  • フは、hu。
  • ザ行は、z。
  • wo、調査中。

訓令式(頻度低)

  • ダ行、da zi zu de do。
  • ジャ行とヂャ行は同じ、zya zyu zyo。

この記事は編集途中です。
必要を持って書き足していこうと思っています。
抜け落ち多くて失礼しました。

コメント投稿のウェブサイト欄を消してみた

コメント投稿のウェブサイト投稿欄を消すのに挑戦した際の備忘録です。

でも現在は、コメント投稿フォームのカスタマイズはしない事にしました。
アラシ対策が面倒という事で、コメント自体を受けつけないことにした。

というわけなので、参考程度に読んでね。

CSSによる方法もある。
CSSで非表示

編集場所はどこか

今回はadd_filterによるカスタマイズ。
これは、通常はfunctions.phpに追加するのが普通ということでしょうか。
comments.phpとか探す必要はないということですね。

当方ではfunctions.phpに追加して、動作しました。

編集の全文

実際に当サイトで使ってみた全文を、まずは示します

add_filter('comment_form_default_fields' , function($arg){
$arg['url'] = '';
return $arg;
});
add_filter('comment_form_defaults' , function($arg){
$arg['comment_notes_before'] = '<p class="comment-notes"><span id="email-notes">'
. 'メアド入力は任意です。表示されません。'
. '</span></p>';
return $arg;
});

前半の数行

add_filter('comment_form_default_fields' , function($arg){
$arg['url'] = '';
return $arg;
});

'url'の部分が、ウェブサイト投稿欄を指定している。
さらにメールアドレス投稿欄も削除する場合、$arg['email'] = '';の一文を加える。
つまり変更したいものだけを指定すればいい。

途中からfunction定義に移っていく。
無名関数を使う。
関数名を定義すると外部に干渉することがあると聞いた。
それで関数名を指定しない方法をとりました。

function ($arg) とあります。()の中、つまり引数は省略不可。

後半の数行

add_filter('comment_form_defaults' , function($arg){
$arg['comment_notes_before'] = '<p class="comment-notes"><span id="email-notes">'
. 'メアド入力は任意です。表示されません。'
. '</span></p>';
return $arg;
});

外に影響しないので、変数名は同じもの(今回はarg)を使ってよい。

メアドに関する注意書きの文を変更する。
この指定内容はHTMLタグを含む。

「メールアドレスが公開されることはありません。」が初期値。
好みの文に変更する。

メールを任意とする場合

メールを任意とする場合は、管理画面からその設定をする。
またCSSで、displayがnoneになってないか確認する。

新規設定の手順

わかっている部分だけ。

  1. すべてnoindex設定。
  2. 一旦はコメントオフ設定。
    メールを必須にするか。
    アバター表示設定オフ。
  3. 乗っ取り対策。
  4. パーマリンク設定。
  5. All in One SEO Pack。
  6. テーマ選択。
  7. ウィジェットなど設置。
  8. noarchiveを二重に設定。

最後にnoindex設定を外す。