WordPressにショートコードを追加して使用するカード型のデザイン

11分

カード型デザインのショートコード

SHARE

シンプルながらも機能性に優れたマテリアルデザインは好きな表現方法の一つです。

2014年6月にGoogleが発表したマテリアルデザインは、影などをつけることで現実世界のように触れられる感覚を再現します。

このマテリアルデザインの中でも、カードと呼ばれるデザインはTwitterやFacebookをはじめ、多くのWebサイトで採用されているデザインです。

今回は、WordPressにショートコードを追加して使用するカード型のデザインについてご紹介します。

ショートコードの設定手順

ショートコードをfunctions.phpにコードを貼り付けして、それぞれに対応するCSSはstyle.cssに貼り付けしましょう。

そしてショートコードを記述すると、WordPressに投稿した日付とタイトル、アイキャッチ画像がセットになったカード型デザインが表示されます。

STEP.1
ショートコードを定義
functions.phpにショートコードの内容を追記して新しいショートコードを定義します。
STEP.2
CSSを追加
style.cssにショートコードのCSSを追加してアコーディオンのデザインを整えましょう。
STEP.3
ショートコードを使う
任意の場所にショートコードが使用可能になります。

カード型デザイン その1

SANGOの一覧で表示されるカード型デザインです。

2カラムでカードを並べて表示する場合は、カラム機能を使ってカードのオブジェクトを並べましょう。

WordPressプラグインのイラスト

プラグイン WP Theme Test を使って本番環境のテーマを非公開でカスタマイズする方法
WordPressプラグインのイラスト

プラグイン WP Theme Test を使って本番環境のテーマを非公開でカスタマイズする方法
WordPressプラグインのイラスト

プラグイン WP Theme Test を使って本番環境のテーマを非公開でカスタマイズする方法

カード型デザイン その1のコード一式

コードを表示する

ショートコード 

[card3 id="ここに記事のIDを入力"]

function.php 

/*********************
カードタイプ3のショートコード追加
 *********************/
add_shortcode('card3', 'sng_longcard_link3'); // カードタイプ（横長）の関連記事を出力
/*********************
 * 関連記事リンク（カードタイプ3）
 *********************/
if (!function_exists('sng_longcard_link3')) {
  function sng_longcard_link3($atts)
  {
    $output = '';
    $ids = isset($atts['id']) ? explode(',', $atts['id']) : null;
    if(!$ids) return "";
    $target = isset($atts['target']) ? ' target="_blank"' : "";
    
    foreach ($ids as $eachid) {
      list($url, $title, $img, $date) = sng_get_entry_link_data($eachid, 'thumb-520', true);
      if ($url && $title) {
        $output .= <<<EOF
<a class="d_linkto longc_linkto" href="{$url}"{$target}>
  <span class="longc_img">{$img}</span>
  <p>{$date}<span class="longc_title">{$title}</span></p>
</a>
EOF;
      } // endif
    } // end foreach
    return $output;
  }
}// END sng_longcard_link3

CSS 

/*カードデザイン3*/
.d_linkto {
  display: block;
  overflow: hidden;
  max-width: 400px;
  width: 100%;
  margin: 1em 0;
  padding: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #555;
  font-weight: bold;
  text-decoration: none !important;
}
.d_linkto:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  color: #888;
  text-decoration: none;
  transform: translateY(-2px);
}
.d_linkto p {
padding: 14px 20px;
margin: 0;
line-height: 1.5em;
}

.d_linkto .d_linkto_text {
  display: block;
  padding: 15px 13px;
  line-height: 1.6;
}
.d_linkto img {
  width: 100%;
}
.longc_linkto {
  margin-bottom: 1.5em;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.longc_linkto img {
  padding: 0;
}

@media only screen and (min-width: 481px) {
  .d_linkto {
    display: inline-block;
    max-width: 310px;
    margin-right: 20px;
  }
  .cell .d_likto {
    margin-right: 0;
  }
  .d_linkto.longc_linkto {
    max-width: 100%;
    display: table;
  }
  .longc_img,
  .d_linkto.longc_linkto .longc_content {
    display: inline;
    vertical-align: middle;
  }
  .longc_img {
    width: 40%;
  }
  .longc_content {
    width: 60%;
  }
  .longc_img img {
    width: 100%;
    padding: 0;
  }
}

カード型デザイン その2

hover した際に画像が拡大されるカード型のデザインです。

2カラムでカードを並べて表示する場合は、カラム機能を使ってカードのオブジェクトを並べましょう。

googleフォントのイラスト

Noto Sansで不要なフォントを削除してサイトのスピードを上げる方法
googleフォントのイラスト

Noto Sansで不要なフォントを削除してサイトのスピードを上げる方法
googleフォントのイラスト

Noto Sansで不要なフォントを削除してサイトのスピードを上げる方法

カード型デザイン その2のコード一式

コードを表示する

ショートコード 

[card4 id="ここに記事のIDを入力"]

function.php 

/*********************
カードタイプ4のショートコード追加
 *********************/
add_shortcode('card4', 'sng_longcard_link4'); // カードタイプ（横長）の関連記事を出力
/*********************
 * 関連記事リンク（カードタイプ4）
 *********************/
if (!function_exists('sng_longcard_link4')) {
  function sng_longcard_link4($atts)
  {
    $output = '';
    $ids = isset($atts['id']) ? explode(',', $atts['id']) : null;
    if(!$ids) return "";
    $target = isset($atts['target']) ? ' target="_blank"' : "";
    
    foreach ($ids as $eachid) {
      list($url, $title, $img, $date) = sng_get_entry_link_data($eachid, 'thumb-520', true);
      if ($url && $title) {
        $output .= <<<EOF
<a class="e_linkto longc_linkto" href="{$url}"{$target}>
  <span class="longc_img">{$img}</span>
  <p>{$date}<span class="longc_title">{$title}</span></p>
</a>
EOF;
      } // endif
    } // end foreach
    return $output;
  }
}// END sng_longcard_link4

CSS 

/*カードデザイン4*/
.e_linkto {
  display: block;
  overflow: hidden;
  max-width: 400px;
  width: 100%;
  margin: 1em 0;
  padding: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #555;
  font-weight: bold;
  text-decoration: none !important;
}
.e_linkto:hover {
  text-decoration: none;
}

.e_linkto:hover img {
  display: block;
  -webkit-transform: scale(1.05,1.05);
  transform: scale(1.05,1.05);
  transition: all .4s;
}

.e_linkto img {
  display: block;
  -webkit-transform: scale(1.00,1.00);
  transform: scale(1.00,1.00);
  transition: all .4s;
}

.e_linkto p {
padding: 14px 20px;
margin: 0;
line-height: 1.5em;
}

.e_linkto .e_linkto_text {
  display: block;
  padding: 15px 13px;
  line-height: 1.6;
}
.e_linkto img {
  width: 100%;
}
.longc_linkto {
  margin-bottom: 1.5em;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.longc_linkto img {
  padding: 0;
}

@media only screen and (min-width: 481px) {
  .e_linkto {
    display: inline-block;
    max-width: 310px;
    margin-right: 20px;
  }
  .cell .e_likto {
    margin-right: 0;
  }
  .e_linkto.longc_linkto {
    max-width: 100%;
    display: table;
  }
  .longc_img,
  .d_linkto.longc_linkto .longc_content {
    display: inline;
    vertical-align: middle;
  }
  .longc_img {
    width: 40%;
  }
  .longc_content {
    width: 60%;
  }
  .longc_img img {
    width: 100%;
    padding: 0;
  }
}

リップルエフェクト付きのカード

タップ時やクリック時のリップルエフェクト（波紋が広がるようなアニメーション）を加えたカード型のデザインです。

実際の触った感覚に近しい表現ができるので結構好きだったりします。

コンテンツマーケティングのイラスト

コンテンツマーケティングとは？運用のメリットや費用・コスト
コンテンツマーケティングのイラスト

コンテンツマーケティングとは？運用のメリットや費用・コスト
コンテンツマーケティングのイラスト

コンテンツマーケティングとは？運用のメリットや費用・コスト

リップルエフェクト付きのカードのコード一式

リップルエフェクト付きのカードは、JavaScriptを使用しています。

ショートコードを設置したページの</body> タグのすぐ前にJSのコードも併せて記述するようにしましょう。

コードを表示する

ショートコード 

[card5 id="ここに記事のIDを入力"]

function.php 

/*********************
カードタイプ5_rippleのショートコード追加
 *********************/
add_shortcode('card5', 'sng_longcard_link5'); // カードタイプ（横長）の関連記事を出力
/*********************
 * 関連記事リンク（カードタイプ5）
 *********************/
if (!function_exists('sng_longcard_link5')) {
  function sng_longcard_link5($atts)
  {
    $output = '';
    $ids = isset($atts['id']) ? explode(',', $atts['id']) : null;
    if(!$ids) return "";
    $target = isset($atts['target']) ? ' target="_blank"' : "";
    
    foreach ($ids as $eachid) {
      list($url, $title, $img, $date) = sng_get_entry_link_data($eachid, 'thumb-520', true);
      if ($url && $title) {
        $output .= <<<EOF
<a class="d_linkto longc_linkto myRipple" href="{$url}"{$target}>
  <span class="longc_img">{$img}</span>
  <p>{$date}<span class="longc_title">{$title}</span></p>
</a>
EOF;
      } // endif
    } // end foreach
    return $output;
  }
}// END sng_longcard_link5

CSS 

/*カードデザイン5*/
.d_linkto {
  display: block;
  overflow: hidden;
  max-width: 400px;
  width: 100%;
  margin: 1em 0;
  padding: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #555;
  font-weight: bold;
  text-decoration: none !important;
}
.d_linkto:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  color: #888;
  text-decoration: none;
  transform: translateY(-2px);
}
.d_linkto p {
padding: 14px 20px;
margin: 0;
line-height: 1.5em;
}

.d_linkto .d_linkto_text {
  display: block;
  padding: 15px 13px;
  line-height: 1.6;
}
.d_linkto img {
  width: 100%;
}
.longc_linkto {
  margin-bottom: 1.5em;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.longc_linkto img {
  padding: 0;
}

@media only screen and (min-width: 481px) {
  .d_linkto {
    display: inline-block;
    max-width: 310px;
    margin-right: 20px;
  }
  .cell .d_likto {
    margin-right: 0;
  }
  .d_linkto.longc_linkto {
    max-width: 100%;
    display: table;
  }
  .longc_img,
  .d_linkto.longc_linkto .longc_content {
    display: inline;
    vertical-align: middle;
  }
  .longc_img {
    width: 40%;
  }
  .longc_content {
    width: 60%;
  }
  .longc_img img {
    width: 100%;
    padding: 0;
  }
}

/**
 * Rippleのエフェクト
 * --------------------------------------------------
 */
.ripple {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    animation: rippleEffect 0.88s 1;
    opacity: 0;
}

@keyframes rippleEffect {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(100);
        opacity: 0;
    }
}

JS 

window.onload = function () {
    let rippleElements = document.getElementsByClassName("myRipple");
    for (var i = 0; i < rippleElements.length; i++) {
        rippleElements[i].onclick = function (e) {
            let X = e.pageX - this.offsetLeft;
            let Y = e.pageY - this.offsetTop;
            let rippleDiv = document.createElement("div");
            rippleDiv.classList.add("ripple");
            rippleDiv.setAttribute("style", "top:" + Y + "px; left:" + X + "px;");
            let customColor = this.getAttribute("ripple-color");
            if (customColor) rippleDiv.style.background = customColor;
            this.appendChild(rippleDiv);
            setTimeout(function () {
                rippleDiv.parentElement.removeChild(rippleDiv);
            }, 900);
        };
    }
};

前の記事

ショートコードのイラスト
WordPressにショートコードを追加して使用するjsのアコ…

次の記事

プラグイン無しでWordPressのページで権限別に管理バーを…
管理バーの表示のイラスト

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら