先日、Twitterでやまもとけんたさん(@itka24office)に『Celtispack』というプラグインを教えてもらった。

リンクを貼るだけで簡単にブックマークレットが作成できるプラグイン「Celtis プラグインパック」

 

ちょうど他のブログのリンクとか貼る時、はてなブックマークのブログカードっぽくなるもの探してた!

ってことで早速入れてみたら何故かうまく表示されない。

 

何か干渉するプラグインが入ってるのか!?はたまた使っているStinger5-Cheetahだからか!?と右往左往して、最終的に2つの問題点を修正することでやっと解決。

 

結論から言うと

  • OGPの設定
  • プラグインの競合

が原因でした。

 

もし同じように『せっかくCeltispack入れたのにブログカードが表示されない!』という人は記事を参考にご自身の環境を確認してみてください。

 

 

Celtispackとは?

Celtispackとはセルティスラボ(@eno_celtislab)で公開しておられる、ブログ運営に欠かせないプラグインをひとまとめにしてくださったプラグインです。

当ブログでは、過去記事でふれたようなプラグインを導入しているのですが、これ1つ導入するだけで随分いらないものも出てくるので、一度整理したいな~と思案中です。

WordPressでブログをしているなら絶対おすすめの Celtispack プラグインパックの紹介です。高速化や画像最適化など様々な機能が満載です。このプラグインと Jetpack を組み合わせて使用して頂ければ、必要なものはほとんどカバー出来ます (^^)…

 

【機能(公式ページより)】

  • Thumbnail optimize 機能
    →アイキャッチ/サムネイル関係の機能向上と最適化
  • ultra help cache
    →アクセス集中時用の負荷低減用のページキャッシュ機能
  • MO stop translate
    →翻訳ファイルの読み込み禁止
  • Unveil Lazyload
    →画像の遅延ロード(Unveil lazyload)を行いブラウザの表示を高速化
  • Gallery Slider
    →FlexSlider2 を用いてギャラリーにスライダー機能を追加
  • FitVids
    →Youtube, Vimeo, Vine, Slideshare, SoundCloud, SpeakerDeck 等の動画やスライド等をレスポンシブ対応表示
  • oEmbed extend
    サイドバーに動画や画像を表示したりOGPを利用してブログカード(Hatenaっぽいやつ)の表示ができる
  • Jetpack OGP Extended
    JetPack でパブリサイズ共有が有効になっている時の挙動拡張
  • Scroll_Page_Top
    →ページトップ及び前後ページへのスクロールボタン機能を追加
  • Code Prettify
    →プログラムコード等を見やすく表示するための google-code-prettify を使用したシンタックスハイライト機能
  • Post Branch Utility
    →『記事のコピーの作成』『更新用下書きの作成』の機能を追加
  • Disable Emoji
    →WordPress4.2 からサポートされた絵文字用スクリプト、スタイルシートサポート機能の停止
  • Transient cleaner
    →有効期限切れの Transient キャッシュをクリア
  • Post Widget Area
    →記事タイトル後、モアタグ後、コンテンツ後にウィジェットエリアを設置
  • Responsive AdSense Widget
    →アドセンスのレスポンシブ広告を簡単に設置するためのウィジェット
  • Recent posts Widget
    →最近の記事/更新記事を表示するウィジェット
  • Related posts Widget
    →関連記事を表示するウィジェット
  • Dynamic Tag Cloud
    →投稿記事のカテゴリーに関連したタグを表示
  • Sharedaddy popular posts
    →シェアボタンの追加。
  • Hatenaブックマーク追加
  • カウント表示機能
  • 共有数による人気記事ランキングウィジェット
  • 追尾型共有ボタン
  • GA popular posts Widget
  • Googleアナリティクストラッキングコード
  • ファビコン
  • description meta タグ
  • RSS Feeds へアイキャッチ画像出力

 

インストール方法は、上記のやまもとけんたさん(@itka24office)のサイトが分かりやすかったのでぜひご覧くださいませ。

 

 

スポンサーリンク

ブログカードが表示されない…だと!?

プラグインを導入したら、早速試してみます。(というかみようとしました)

celtispack-simple-mistake-01

 

あれ・・・?(つд⊂)ゴシゴシ→(;゚ Д゚) …!?

 

URL貼れば良いんじゃなかったの!?

 

タイトルのテキストにリンクをつけてみたり、URLだけリンク無しで設置してみたり、でもうまく行かない。

 

なぜだ!?

 

プラグインを1つずつ無効化/有効化してみてもダメー!。

 

テーマの何かが干渉しているのかと思い、Stinger5やSimplicityなどのテーマを入れてみるもダメーー!!。

 

困った…

 

 

スポンサーリンク

単純なミスを発見!

導入を諦めかけた時、もう一度上記のやまもとけんたさん(@itka24office)の記事を眺めていてふと思った。

 

少なくとも、リンクの貼られてるセルティスラボさんのページはうまく表示されるのでは?

 

改めて新規記事を作成し、ダウンロードページのURLをコピーしてから、改めて新規記事を作成し『Ctrl + V』で貼り付けてみると…

celtispack-simple-mistake-02

 

上手く行った!!!

てか、自分のサイト自体がダメだったわけだ(-_-;)

 

それなら原因はなんぞや…?

ここで落ち着いてもう一度考えてみる。

 

今回使いたい機能は↓

oEmbed extend
サイドバーに動画や画像を表示したりOGPを利用してブログカード(Hatenaっぽいやつ)の表示ができる

 

・・・

 

・・

 

 

ん?『OGPを利用して』…

 

あ!

 

ああ!!

 

あああ!!!

 

OGPの設定を忘れてた!!!Σ(゚д゚lll)ガーン

 

まさかすぎるミスに、判明したとき『うわぁ!』って声に出してた…(-_-;)

 

補足:OGPって何?

「Open Graph protocol」の略で、FacebookやTwitterなどでブログをシェアしてもらった際に、画像や説明文が表示されるように、『このブログはどんな内容ですよ~』と記述しておく設定のことです。

 

 

OGPを設定して無事解決!…じゃなかった

WordPressを利用している場合、プラグインで簡単に設定が可能です。

『All in One SEO Pack』が一番有名ですかね。

 

導入については↓の記事とかを参考にどうぞ

ワードプレスでは必需品とも言える「All in One SEO Pack」。記事毎にタイトルやディスクリプション、キーワード設定できるのでめちゃくちゃ便利なんですが、実はそれ以外にもFacebookのOGP設定やTwittercardの設定もAll in One SEO Packでできることをご存知でしょうか?

 

当ブログは『All in One SEO Pack』を導入しているので、上記の記事を参考に、本番環境にてOGPの設定をしてみました。

 

そしていよいよ、もう一度URLを貼り付けてみると…

 

・・・

 

・・

 

 

celtispack-simple-mistake-03

 

表示されない!ヽ(`Д´)ノウワァァァン!!

 

 

2つ目の原因を発見!やっと解決!!

仕方がないので、また、プラグインの無効化/有効化を順番に試してみるか~思ったら

celtispack-simple-mistake-04

 

?(つд⊂)ゴシゴシ→(;゚ Д゚) …!?

 

表示されてる!!!?

 

原因は↓でした

celtispack-simple-mistake-05

まさかの1個目で判別!!

 

たしかにCeltispackには『Unveil Lazyload』という画像を遅延読み込みする機能があることは知っていましたが、有効化しなくても影響があるとは・・・

 

まぁ、なんとか原因が判明し、無事にこの記事のようにブログカードを導入することができました!

 

 

TSUNJI(@tsunji1983)的まとめ

今回の教訓は2つ

 

①OGPはちゃんと設定しましょう

②Celtispackで搭載されている機能と同じようなプラグインを導入している場合は競合しないか確認しましょう

 

ちらほら他サイト見てみると、特にキャッシュ系のプラグインとかは相性が悪いとのこと。

 

まあこれだけ多くの機能がひとまとめになったプラグインなので、ブログ管理の面でも、がっつりプラグインを見なおそうかと思います。

 

おしまい