プラグイン無しでブログにリンクカードを実装★|Pz LinkCardが重すぎたけど自作でサクサクに!

最近ワードプレスの記事画面がえらく重いな~と感じていました。ログインボタン押してから5~8秒位かかる時もあってかなりのストレスでした。

原因はサーバなんだろうなと勝手に思ってましたが最近入れたプラグインというとPz-linkcardくらいなので一回停止して削除して試したらぉおぉおぉお!サクサクっと!

ブログの方もチェックすると軽くなってる!!!

もともと画像多しのストークを利用してるのでスマホだと軽いときで2秒・重い時で5秒程度かかってました。(これでひろしワークは早い方)

Pz-linkcard入れてから10秒くらいになったので間違いなく影響してます。調べると同じような人がかなり多い事を知りました。

あとPzリンクカードはサムネイルの両端が見切れるので、作成者のぽぽずれさんに聞いたところ今の所解決案が出てこないという事でした。画像だけのサムネイルの人は全然良いと思います。が、アイキャッチにタイトル並みに文字を入れるタイプの人には見切れは致命的です。ん~何か策を。

実際にPz-linkcardプラグインを作成したぽぽづれさんもやり取りしましたが現在バージョンではお手上げのようです。

ぽぽづれさんで出来ないということはひろぱぱごときに「当然」出来る事はありません。

Pzlinkcardはプラグインなのでどの環境でも対応できるようオールマイティに作るので、使わない膨大なデザインコードも機能も全て格納していつでも動けるよ~と待機してます。コードの行数だけで2000行は越してるのは確認してます。

1個修正するだけでも検証も多くかなり大変なのだと思います。

ぽぽづれさんも凄い人です!!!

 

ということで今回はサクサク動いて軽くしたいし好きなようにしたい♥

自分で作成すればスタイルシートで100行程度、ファンクション50行程度で出来ました^^ 文字サイズ、文字数、色、配置なども理想になりましたし。

重さに関しては当然アドセンス自動広告も影響してますがこれは削除できないので、Pz-linkcardを削除してからスタイルシートとファンクションへコード打ち込んで作成しました。

 

いや💦

 

偶然質問した天才師匠MACOBLOGを運営しているWEBトマトさんに手取り足取りして頂きながら作成してもらいました^^;

ひろしワークは敢えて写真多めにしてブログ自体がくどいので(笑)、リンクカードくらいはシンプルにしたいという希望も叶えて頂きました^^

ブログリンクカードのイメージ

デザインを参考にさせて頂いたのは、ウェブレッジのけーすけさんのブログです。

いざ実装するとけーすけさんのブログには素晴らしくマッチしてますが、ひろぱぱブログではちょっとシンプル過ぎて寂しい感じでした。

ストークは横幅が700pxなのでそれとの兼ね合いですね。

シンプルで見やすいです★
ただタイトルによっては空きエリアが出来過ぎて寂しいのでロゴマークを小さく持ってきて、抜粋分を文字数少な目に色を薄く入れたいというのが理想です。
リンクアドレスなどはごちゃごちゃの基になるので不要としました。

ガンガン教えてもらいながら、その沿革です。

ブログリンクカードのデスクトップ/タブレット表示

画像の下に文字をもってきて。
上下幅が出過ぎるとバランスが悪くなるので、続きを読むボタンと同じ行にロゴ文字を持ってきたいです。

ロゴマーク画像をメディアにぶちこんで。

スタイルシートで整えて。空白がやはり大きすぎなので小さい文字で薄く、くどくないように抜粋分を入れたいなと。

良い感じ♥ 抜粋分が文字で終わってるので、「…」で続く感じをいれよう。

あれ!? また戻って(笑)。スタイルシートとファンクションを行ったり来たりして。

完成♥♥♥ バナーでもリンクカードでも、続きを読むボタンはクリック率が上がるというデータがあるそうです。

ブログリンクカードのスマホ表示

上記をスマホで見ると。正直左寄せサムネイル画像のこれもお気に入りですがタイトルが長い時くずれてしまいます。

レスポンシブ幅にして色んなサイズのスマホなどに対応して。
ん!? 文字がセンタリングはバランスが悪いです。
続きを読むボタンがタイトル行と同じ行にきてます。

完成♥♥♥

ロゴマークも入れてるのでこれが外部リンクではない事もきちんと分かり安心ですし、情報を表示しすずに、かつシンプルながらサムネイル画像は見切れ無しで表示。

このシンプルさなら2個3個と並んでもくどくなりませんので、お腹いっぱに満足です♥

 

この記事の書き方だと私がしたように見えますが実はこれ、天才師匠が裏で全てしてくれました^^;

次回紹介いたします。

総時間5時間チャット形式で一緒にして頂けましたが、色んな良い意味でこんな凄い人いません(笑)。 誰が時間割いて、しかも見ず知らずの他人のサイトなんて希望通りに応えてくれますか?

鬼畜の所業です。←(※最高級良い方の意味ですよ)

結果:ひろしワークのリンクカードのコード

functions.php

ファンクションファイル貼り付けコードがこちら
※54行目は自分の”アイコンURL”と”カーソル時サイト名など”と”ブログorサイト名”などへ書き換えて下さい。

 

 style.css

スタイルシート貼り付けコードがこちら

 

ひろしぱぱ
ちなみに最初のイメージを師匠に伝えてから「こんな感じにしたいの?」のイメージ到着までなんと5分かからない人です( ゚Д゚)ぎょえ~~~!!!
世の中には天才が存在します。
師匠WEBトマトさんは頭が良すぎてついていけないですがゆっくりしてもらえました(苦笑)
師匠はこちらのブログを運営してます。【macoblog

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です