【Jetpackで共有】全文書かれてしまう・・・

【6月8日更新】このブログを含み、Wordpressで書いた記事はJetpackで共有しているのですが、なんとほぼほぼ全文共有されてしまうというケースに遭遇しています。。。

2015.06.08追記:スペースマーケットさんがこの問題の暫定的な対応方法を掲載していますのでそちらをご覧下さい。また、この記事もこれに合わせて修正しています。

【WordPress】JetpackでFacebookパブリサイズ共有を行った際に記事全文が共有されてしまう問題への暫定対応 | スペースマーケットブログ

WordPressで書いた記事をFacebookなどで共有するとき、てっとり早く共有出来るのが、Wordpress謹製の【Jetpack】。

しかし、そのJetpackでほぼほぼ全文共有されてしまうというケースに今頭を悩めています。。。

本来はこうなるはず

本来はこう共有されるはずというイメージ画像です。

※イメージ画像です。

しかしこうなってしまいます

記事の内容が延々と続いてしまいます。

読む気ならないですよね。。。これだと見てくれる人がいない。。。

昨日今日起きた事ではないらしい

既に頭を抱えている先人の方々がいらっしゃいます。

【WP】Jetpackのパブリサイズ共有でFacebookウォールに全文投稿されてしまう
http://bey.jp/?p=3396

Webクリエイター 日向凛 さん:
げげげ jetpackのパブリサイズ共有でSNS連携したら、Facebook Googleプラスともに記事全文が投稿されてる。おまけにGoogleプラスの投稿は「限定公開」になってるし…残念。
https://twitter.com/rin_aqua/status/540692443872493568

なるブログとならないブログの違い、だとしたらなるブログが何が原因なのか、何がトリガーになっているのか。…解明できていない状態です。

・・・そういえば、この記事を投稿してみるとどうなるのでしょうか。

A.やはりなってしまう。

やはり本文がだらーっと出てしまいます。(※今では修正済みです)

やはり本文がだらーっと出てしまいます。。。
(そのまま放置だとかっこわるいので、今では修正済みです)

この問題を解決させるためには?

a. Jetpackを使うのをやめる。

Jetpackで自動投稿するのをやめて、1記事1記事、手動で投稿していく。

b. WordPressを騙して使う。

時系列で説明するとこんな方法です。

  1. 予め投稿したい本文(画像・装飾含)をテキストモードで全文、メモ帳などにコピー
  2. 万が一変に共有されてもいいように、最低限の文章・画像だけでひとまず投稿(公開)
  3. その後すぐに、予めコピーしておいた本文をテキストモードでペーストし、差し替え

c. 投稿直前、ブログ投稿画面の右サイドバー「パブリサイズ共有」内の「詳細を編集」をクリック

jetpack-before-publisizesharedetail

その後出てくるテキスト欄に記事タイトルが書かれている事を確認してから公開してください。
予約投稿の場合も同様です。

c. の方法によって一旦暫定的に解決できますが・・・何が原因なのかはわかりませんが、改善を願うばかりです。

プログラマ・WEBデザイナーのみなさんへアンケートです。是非ご協力を!

[poll id=”1″]

[poll id=”2″]

[poll id=”3″]

[poll id=”4″]

[poll id=”5″]

【WordPress】カスタムフィールドテンプレートのテーマ内foreach処理

先日、Wordpressのテンプレート内にカスタムフィールドテンプレートを用いて項目を表示するという案件がありましたが、テーマのアップグレードで消してしまいました…。備忘録がてらにコードを書いてみました。

繰り返しイメージ画像

Photo Repeat by Thomas Hawk.

先日、Wordpressのテンプレート「Twenty Fifteen」内にカスタムフィールドテンプレートを用いて項目を表示する、という案件がありました。

しかし、以前にそのコーディングをしたのですが、Wordpress のテーマをアップグレードしてしまい、その作業を無駄にしていまいました・・・

教訓!

親テンプレートは弄るな。子テンプレートを作れ。

(ただし、自作テーマの場合はこの限りではない)

ということで、今回の作業を備忘録していきます。

カスタムフィールドテンプレートのforeach処理

今回は「Twenty Fifteen」内に書くので、対象のPHPは「content.php」になります。

そして今回はさらに、このようにしたいと思っています。

  • レスポンシブしやすくするため、定義形式(DT-DL-DD)
  • もしもカテゴリーがrecruitだったらに限定
  • 該当項目が空白だったら、その項目は非表示
  • 複数行にも対応(しなくても良いところもありますが、纏めて対応)

・・・ずばりコーディングするとこうなります。

位置関係を言うと、div.entry-contentが来て、the_content・wp_link_pagesの処理が終わったあとの次です。

子テーマを作れ

今回泣く事になってしまった原因です。

取り敢えず、下記サイトを参照してサクっと作ってきました。

wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順 | ゆとり世代のブログ運営論
http://viral-community.com/wordpress/wp-child-theme-5818/

また作る事もあるかも知れないので、今回の style.css も備忘録がてらに貼っておきます。

Templateのところはディレクトリ名なので、テンプレート名 Twenty Fifteen と入れない様に注意が必要です。ここでも沼にはまってしまいました・・・。

WordPress のバーを少し透かしてみた

少し前の話になりますが、Wordpress の管理画面のバーを少し色透明にしてみました。

Wordpress Bar - Transparent

少し前のお話しになりますが・・・

WordPress 3.9 以降ですと、Wordpress のバーはフラットデザインの黒いバーになります。

今回お客様の WordPress のテーマを作るにあたり、ちょっとした遊び心でバーの色をちょっと透明にしてみました。

CSS

解説

  • Q. なぜ 783px 以上のメディアクエリーがあるのか?
    タブレット以下になると、Wordpress のバーは上部固定ではなくなってしまいます。そうなると半透明である理由がなくなってしまうので、783px 以上限定にしています。
    ただ position: fixed; を掛ければまたいい話なんですけどね・・・
  • あの長い 7 〜 13 行目のCSSは?
    上部バーから展開するプルダウンにも適用させるための CSS です。上部バーよりも若干明るく・薄くしています。

WordPress のデバッグプラグイン。

Wordpress 内で具体的にどういう処理がされているかを「Query Monitor」プラグインで調べることができます。

例えば、Windows を使っている人は「タスク マネージャ」、

QueryMonitor0

Mac OS X を使ってる人は「アクティビティモニタ」を使ったり、見たことは何回かあると思います。

QueryMonitor1

パソコンが重いときは何が原因なんだろう…とこれで調べることがよくありました。

それの WordPress 版

そして、Wordpress でも、具体的にどういう処理がされて、どういうプラグイン・処理が悪さをしているかの判断に助かるプラグインを…、他の人(いや、会社?)のブログから初めて知りました。

WordPressのデバッグプラグイン「Query Monitor」をサイト制作・カスタマイズに役立てよう
http://liginc.co.jp/web/wp/plug-in/151347

自分も入れてみた

入れてみたら早速、ページ生成時間・メモリ・DBクエリの実行時間・実行したクエリ数の4つが表示されました。
0.67s は早いのか遅いのか・・・参考までに CPI サーバーで12個プラグインを有効にしています(恐らく個数だけの問題じゃないと思うが)。

QueryMonitor2

早速軽度のエラーが

Notice エラーが1つ、Deprecated エラーが1つ出てきました・・・。いずれも軽度なエラーなのですが、何なのでしょうか。調べてみます。

QueryMonitor3