SWELL\u2502\u6700\u65b0\u7248\uff01\u30a2\u30af\u30b7\u30e7\u30f3\u30d5\u30c3\u30af\u30fb\u30d5\u30a3\u30eb\u30bf\u30fc\u30d5\u30c3\u30af79\u500b\u5168\u307e\u3068\u3081<\/div>\n
\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <\/ul>\n<\/div>\n<\/div><\/div>\n\n\n\n
SWELL\u3067\u81ea\u4f5c\u306e\u4eba\u6c17\u8a18\u4e8b\u30e9\u30f3\u30ad\u30f3\u30b0\u30ab\u30fc\u30c9\u3092\u4f5c\u308b\u65b9\u6cd5<\/h2>\n\n\n\n
\u3084\u308a\u65b9\u306f\u81ea\u4f5c\u306e\u30d6\u30ed\u30b0\u30ab\u30fc\u30c9\u3092\u751f\u6210\u3059\u308b\u969b\u306b\u3001SWELL\u3067\u8a08\u6e2c\u3057\u3066\u3044\u308bPV\u6570\u3092\u53d6\u5f97\u3057\u3066\u4e26\u3073\u66ff\u3048\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n
functions.php<\/h3>\n\n\n\n
\u5916\u89b3 \uff1e \u30c6\u30fc\u30de\u30a8\u30c7\u30a3\u30bf \uff1efunctions.php\u306b\u4e0b\u8a18\u306e\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u4eca\u56de\u306f\u4e0a\u4f4d6\u8a18\u4e8b\u3092\u30ab\u30fc\u30c9\u306b\u3057\u3066\u4e26\u3079\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u3061\u306a\u307f\u306bSWELL_CT_KEY\uff08ct_post_views_byloo\uff09<\/strong>\u3068\u3044\u3046meta_key\u304b\u3089PV\u6570\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\nfunction motoki_swell_popular_posts_shortcode() {\n ob_start();\n $args = [\n 'posts_per_page' => 6,\n 'post_type' => 'post',\n 'ignore_sticky_posts' => 1,\n 'meta_key' => SWELL_CT_KEY,\n 'orderby' => 'meta_value_num',\n 'order' => 'DESC',\n ];\n $the_query = new WP_Query($args);\n $rank = 1;\n\n if ($the_query->have_posts()) :\n echo '<ul class="p-postList -type-card -w-ranking">';\n while ($the_query->have_posts()) : $the_query->the_post();\n ?>\n <li class="p-postList__item">\n <a href="<?php the_permalink(); ?>" class="p-postList__link">\n <div class="p-postList__thumb c-postThumb">\n <figure class="c-postThumb__figure">\n <?php if (has_post_thumbnail()) : ?>\n <img class="c-postThumb__img u-obf-cover" src="<?php the_post_thumbnail_url('medium'); ?>" alt="<?php the_title(); ?>" sizes="(min-width: 600px) 320px, 50vw">\n <?php endif; ?>\n <\/figure>\n <\/div>\n <div class="p-postList__body">\n <div class="p-postList__title"><?php the_title(); ?><\/div>\n <div class="p-postList__meta">\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <?php\n $rank++;\n endwhile;\n echo '<\/ul>';\n wp_reset_postdata();\n endif;\n\n return ob_get_clean();\n}\nadd_shortcode('motoki_swell_popular_posts', 'motoki_swell_popular_posts_shortcode');<\/code><\/pre><\/div>\n\n\n\nCSS<\/h3>\n\n\n\n
\u898b\u305f\u76ee\u3092\u6574\u3048\u307e\u3059\u3002<\/p>\n\n\n\n
PC\u3067\u306f3\u5217\u3001\u30b9\u30de\u30db\u3067\u306f2\u5217\u306b\u30ab\u30fc\u30c9\u3092\u4e26\u3079\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u8868\u793a\u3059\u308b\u3068\u304d\u306f1\u5217\u306b\u306a\u308b\u3088\u3046\u306bCSS\u3092\u8ffd\u8a18\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
.-w-ranking .p-postList__item {\n flex: 1 1 calc(33.33% - 20px);\n}\n@media (max-width: 960px) {\n .-w-ranking .p-postList__item {\n flex: 1 1 calc(50% - 20px);\n }\n}\n\/* \u30b5\u30a4\u30c9\u30d0\u30fc\u7528 *\/\n.l-sidebar .-w-ranking .p-postList__item {\n flex: 1 1 100%;\n}<\/code><\/pre><\/div>\n\n\n\n\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9<\/h3>\n\n\n\n
\u4e0b\u8a18\u306e\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u8a18\u4e8b\u306b\u633f\u5165\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
[motoki_swell_popular_posts]<\/code><\/p>\n\n\n\n\u51fa\u529b\u7d50\u679c\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n\n\n\n
\u4eba\u6c17\u8a18\u4e8b\u30e9\u30f3\u30ad\u30f3\u30b0<\/strong>\uff08\u30b5\u30f3\u30d7\u30eb\uff09<\/p>\n\n\n
![\"SWELL\u2502\u30b9\u30de\u30db\u753b\u9762\u4e0b\u3068\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u56fa\u5b9a\u8ffd\u5f93\u30d0\u30ca\u30fc\u3092\u8a2d\u7f6e\u3059\u308b\u65b9\u6cd5\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/swell-fixed-banner-382x215.jpg\")
\n <\/figure>\n <\/div>\n \nSWELL\u2502\u30b9\u30de\u30db\u753b\u9762\u4e0b\u3068\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u56fa\u5b9a\u8ffd\u5f93\u30d0\u30ca\u30fc\u3092\u8a2d\u7f6e\u3059\u308b\u65b9\u6cd5<\/div>\n\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n![\"SWELL\u2502\u3088\u304f\u4f7f\u3046CSS\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u2502\u30d8\u30c3\u30c0\u30fc\u30fb\u30d5\u30c3\u30bf\u30fc\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/swell-customize-css-382x215.jpg\")
\n <\/figure>\n <\/div>\n \nSWELL\u2502\u3088\u304f\u4f7f\u3046CSS\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u2502\u30d8\u30c3\u30c0\u30fc\u30fb\u30d5\u30c3\u30bf\u30fc<\/div>\n\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n![\"XServer](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/xserver-vps-auto-renew-382x215.jpg\")
\n <\/figure>\n <\/div>\n \nXServer VPS\u2502\u624b\u52d5\u66f4\u65b0\u3092\u81ea\u52d5\u5316\u3059\u308b\u65b9\u6cd5<\/div>\n\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n![\"WordPress\u2502\u30d6\u30ed\u30c3\u30af\u306b\u3075\u308f\u3063\u3068\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u65b9\u6cd5\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/fade-in-animation-382x215.jpg\")
\n <\/figure>\n <\/div>\n \nWordPress\u2502\u30d6\u30ed\u30c3\u30af\u306b\u3075\u308f\u3063\u3068\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u65b9\u6cd5<\/div>\n![\"SWELL\u2502\u6700\u65b0\u7248\uff01CSS\u3067\u3082\u4f7f\u3048\u308bSWELL\u30a2\u30a4\u30b3\u30f3\u4e00\u89a7](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/swell-icon-382x215.jpg\"){kind=icon}
\n <\/figure>\n <\/div>\n ![\"SWELL\u2502\u6700\u65b0\u7248\uff01\u30a2\u30af\u30b7\u30e7\u30f3\u30d5\u30c3\u30af\u30fb\u30d5\u30a3\u30eb\u30bf\u30fc\u30d5\u30c3\u30af79\u500b\u5168\u307e\u3068\u3081\"](\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/swell-hook-382x215.jpg\")
\n <\/figure>\n <\/div>\n