はじめに
こんにちは！
本日はWordpressで書いたブログの記事をかっこよくする
ブログカードをプラグインなしで自作する方法を紹介いたします！！
はじめて、PHPを触る方でも安心、コピペするだけ下記のようなブログカードを作る方方法を紹介いたします！
SEOの観点、集客の観点でも内部リンクは非常に重要になってきます。テキストリンクではなく、画像付きのブログカードでリンクを表示することで、ブログ内の回遊率UPが期待できます！
サムネイル付きリンク先URLの作り方は、むずかしくありませんが、ワードプレスのFunction.phpに貼り付けなどが必要になります！
今回は私がネットで落ちているものから、改良を加えてスマートフォンでもきれいに表示がされるようにいたしました！
また別タブで表示もしたかったので、そちらの設定も追加いたしました！
※ゆかブログさん、macoblogさんのすばらしい記事を参考にさせていただきました。
1. コピペで簡単！
2. プラグインいらず！
3. ショートコードで一発で挿入できる！
4. あわせて読みたいリンク付き！
5. 続きを読むボタンも実装！
6. スマートフォン＆PCに最適化したデザイン！
プラグインいらず自作ブログカード・リンクカードのメリット
プラグインを使わずに直接Function.phpとCSSをいじり自作ブログカードを作るメリットは
ずばり ブログが重くならない
点になります。プラグインを利用してしまうと、どうしてもブログのスピードが遅くなってしまうので、自作できるものは自作していただくのをおすすめいたします。
WordPressでブログカードを作る方法
今回のブログカードはあわせて読みたいロゴと、続きを読むロゴ付きになります。
パソコンとスマートフォンでの表示例は下記になっております！
PC：アイキャッチ画像、ブログタイトル、目次を自動で引用しています。
スマホ：アイキャッチ画像、ブログタイトルのみでスッキリとした見た目に仕上がっております。
ブログカードを自作する手順
- functions.phpにコードを挿入
- 追加CSSにCSSを追加
- Addクイックタグを用いるとさらに便利に
①ブログカードのコードをfunction.phpに挿入
まずは、テーマのfunctions.phpを編集しましょう。
必ずfunction.phpの内容はバックアップをとりましょう！
外観→テーマエディター→右のTheme Functionsの順になります。
上述していますが、必ずバックアップはとっておきましょう。
挿入箇所は ?> の前に下のあわせて読みたいリンク付きのブログカードのphpコードをコピペしましょう。
下記コードになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
//---------------------------------------// // 内部リンクのブログカード化（ショートコード） // ここから //---------------------------------------// // 記事IDを指定して抜粋文を取得 function ltl_get_the_excerpt( $post_id ){ global $post; $post_bu = $post; $post = get_post( $post_id ); setup_postdata( $post_id ); $output = get_the_excerpt(); $post = $post_bu; return $output; } //ショートコード function nlink_scode($atts) { extract(shortcode_atts(array( 'url'=>"", 'title'=>"", 'excerpt'=>"" ),$atts)); $id = url_to_postid($url);//URLから投稿IDを取得 $no_image = 'noimageに指定したい画像があればここにパス';//アイキャッチ画像がない場合の画像を指定 //タイトルを取得 if(empty($title)){ $title = esc_html(get_the_title($id)); } //抜粋文を取得 if( empty( $excerpt ) ){ $excerpt = esc_html( ltl_get_the_excerpt( $id ) ); if( mb_strlen($excerpt, 'UTF-8') > 80 ){ $excerpt= mb_substr($excerpt, 0, 80, 'UTF-8').'.....'; } } //アイキャッチ画像を取得 if(has_post_thumbnail($id)) { $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'medium'); $img_tag = "<img src='" . $img[0] . "' alt='{$title}'/>"; }else{ $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />'; } $nlink .=' <a href="'. $url .'" class="tmt-blog-card" target="_blank" rel="noopener noreferrer"> <div class="tmt-blog-card-box"> <div class="tmt-blog-card-thumbnail">'. $img_tag .'</div> <div class="tmt-blog-card-content"> <div class="tmt-blog-card-title">'. $title .' </div> <div class="tmt-blog-card-excerpt">'. $excerpt .'</div> </div> </div> <div class="tmt-blog-card-site">'. $site .'</div> </a>'; return $nlink; } add_shortcode("nlink", "nlink_scode"); //---------------------------------------// // ここまで // 内部リンクのブログカード化（ショートコード） //---------------------------------------// |
②追加CSSにCSSをコピペする
下記コードがブログカードのデザインを決めるCSSになります。
すべてコピーしていただいて、追加CSSもしくはテーマエディターのCSSへ追記をお願いします。CSSの追加方法がわからない方は下記記事をご参考にください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
/*------------------------- ブログカード -------------------------*/ a.tmt-blog-card { border: 1px solid #e1e1e1; box-shadow: 2px 2px #ddd; display: block; padding: 20px; position: relative; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; width: 100%; } a.tmt-blog-card::before { background-color: #FFCC33; border: solid 1px #939393; color: #FFFFFF; content: '合わせて読みたい'; font-size: 12px; font-weight: bold; display: block; padding: 4px 20px; position: absolute; top: -15px; left: 25px; } a.tmt-blog-card::after { border: solid 1px #939393; color: #939393; content: '続きを読む'; font-size: 14px; display: block; padding: 5px 20px; position: absolute; bottom: 10px; right: 20px; } a.tmt-blog-card:hover { box-shadow: none; opacity: .8; } .tmt-blog-card-box { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .tmt-blog-card-title { font-size: 18px; font-weight: 600; color: #428bca; padding-bottom: 5px; } .tmt-blog-card-thumbnail { flex: 1; margin-right: 15px; padding-top: 5px; } .tmt-blog-card-thumbnail img { width: 100%; } .tmt-blog-card-content { flex: 2.5; } .tmt-blog-card-excerpt { border-bottom: dashed 1px #a4a4a4; color: #a4a4a4; font-size: 13px; padding-bottom: 15px; } .tmt-blog-card-site { color: #b2b2b2; font-size: 11px; padding-left: 5px; } .tmt-blog-card-site img { margin-right: 5px; vertical-align: bottom; width: 20px; } @media (max-width: 980px) { .tmt-blog-card-excerpt { border: none; } } @media (max-width: 640px) { a.tmt-blog-card { padding: 10px 10px 20px 10px; } a.tmt-blog-card::before { font-size: 11px; padding: 2.5px 8px; top: -15px; left: 10px; } a.tmt-blog-card::after { font-size: 12px; padding: 2px 13px; right: 10px; } .tmt-blog-card-thumbnail { margin-right: 10px; padding-top: 10px; } .tmt-blog-card-title { font-size: 14px; } .tmt-blog-card-excerpt { display: none; } } |
③作成したブログカードをショートコードで挿入する
次に、実際につくったブログカードをWordpressの記事の中に挿入をしましょう。
非常に簡単になります。
|
1 |
[nlink url="ここに記事リンク"] |
上記のショートコードを記事に貼り、ここに記事リンクに飛ばしたいリンク先URLをテキストで入れるだけで完成になります！
ただ、いちいちショートコードを手入力で入れるのは手間ですよね・・・
そんなときはワードプレスのプラグインAddQuicktagを使うとワンクリックで
ブログカードのショートコードを貼り付けすることができます！
最後に
いかがでしたでしょうか？
ブログカードのデザインを変えるだけでも、ユーザー様の回遊率は大きく変わります！
他のWordpress、ブログ執筆に関しての記事は下記で紹介しております！
またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください！
モバイルバッテリーでパソコンが充電できるのご存知でしょうか？
USB PD（45W）ポートがあるAnkerの下記
モバイルバッテリーですとパソコンの充電も可能の
超超超高性能になります！
さらにPC充電用のコードもついているため
こちらを購入するだけまる1日外でパソコン、スマホ生活ができてしまいます！
人生が変わるかも？本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！
