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

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

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

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 を使って本番環境のテーマを非公開でカスタマイズする方法

カード型デザイン その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で不要なフォントを削除してサイトのスピードを上げる方法

カード型デザイン その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);
        };
    }
};