手入力ショートコード

テキスト

手入力ショートコード

WordPress│特定のページだけJavaScriptを読み込む方法

上書きできて便利なJavaScriptですが、特手のページだけ読み込みさせたい時がありますよね。そんな時はfunctions.phpをうまく使って条件を付けてあげると良いです。

＞続きを読む

小文字の>の場合

WordPress│特定のページだけJavaScriptを読み込む方法

> 続きを読む

ショートコード

HTML

[excard image="https://motoki-design.co.jp/wp-content/uploads/read-javascript.jpg" url="https://motoki-design.co.jp/wordpress-customize/blog/read-javascript/" title="WordPress│特定のページだけJavaScriptを読み込む方法" description="上書きできて便利なJavaScriptですが、特手のページだけ読み込みさせたい時がありますよね。そんな時はfunctions.phpをうまく使って条件を付けてあげると良いです。" more ="> 続きを読む"]

小文字の>の場合

HTML

[excard image="https://motoki-design.co.jp/wp-content/uploads/read-javascript.jpg" url="https://motoki-design.co.jp/wordpress-customize/blog/read-javascript/" title="WordPress│特定のページだけJavaScriptを読み込む方法" description="上書きできて便利なJavaScriptですが、特手のページだけ読み込みさせたい時がありますよね。そんな時はfunctions.phpをうまく使って条件を付けてあげると良いです。" more ="> 続きを読む"]

functions.php

function is_mobile() {
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    $mobile_devices = array(
        'iPhone', 'iPod', 'iPad', 'Android', 'BlackBerry', 'Windows Phone', 'webOS', 'Symbian'
    );

    foreach ($mobile_devices as $device) {
        if (strpos($user_agent, $device) !== false) {
            return true;
        }
    }
    return false;
}

function excard_shortcode($atts) {
    ob_start();
    $atts = shortcode_atts(array(
        'image' => '',
        'url' => '',
        'title' => '',
        'description' => '',
        'more' => '',
    ), $atts, 'excard');
    
    if (is_mobile()) {
        $max_length = 50; // スマホで省略する文字数を設定
        if (strlen($atts['description']) > $max_length) {
            $atts['description'] = mb_substr($atts['description'], 0, $max_length) . '...';
        }
    }
    
    $html = '<div class="ex-blog-card"><a href="' . esc_url($atts['url']) . '">';
    $html .= '<div class="ex-blog-card-thumbnail"><img src="' . esc_url($atts['image']) . '" alt="" ></div>';
    $html .= '<div class="ex-blog-card-content">';
    $html .= '<div class="ex-blog-card-title">' . htmlspecialchars($atts['title']) . '</div>';
    $html .= '<div class="ex-blog-card-description">' . htmlspecialchars($atts['description']) . '</div>';
    $html .= '<div class="ex-blog-card-more">' . htmlspecialchars($atts['more']) . '</div>';
    $html .= '</div>';
    $html .= '</a></div>';
    ob_end_clean();
    return $html;
}

add_shortcode('excard', 'excard_shortcode');

css

.ex-blog-card {
    display: flex;
    align-items: flex-start;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
    border-color: rgb(153, 153, 153);
    box-shadow: rgb(102, 102, 102) 4px 4px 0px;
}

.ex-blog-card:hover {
    box-shadow: 0px 0px 0px #666;
}

.ex-blog-card a {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.ex-blog-card-thumbnail {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin-right: 10px;
}

.ex-blog-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ex-blog-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.ex-blog-card-title {
    position: relative;
    top: 6px;
    font-size: 1em;
    color: #00f;
    font-weight: bold;
    line-height: 1.6em;
    margin-bottom: 0.5em;
}

.ex-blog-card-description {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 8px;
}

.ex-blog-card-more {
    font-size: 0.8em;
    color: #ffffff;
    align-self: flex-end;
    background-color: #000;
    padding: 3px 10px;
}

/* スマホ用のスタイル */
@media (max-width: 480px) {
    .ex-blog-card {
        flex-direction: column;
    }
    .ex-blog-card-thumbnail {
        width: 110px;
        height: 110px;
    }
    .ex-blog-card-thumbnail {
        margin-bottom: 10px;
    }
    .ex-blog-card-content {
        flex-direction: column;
    }
}