首页 > 其他分享 >WordPress简码实现的一些常用的效果

WordPress简码实现的一些常用的效果

时间：2023-12-11 22:56:10浏览次数：34  
标签：常用 简码 shortcode product related WordPress output my latest

首先要确保框架里已经安装好element pro插件，
下面是使用简码，来实现效果，在element中找到简码，并且在WordPress后台主题编辑器中，找到function.php文件，

 

显示产品的分类，下面是效果图

 在function.php中添加如下代码，

add_theme_support( 'post-thumbnails' );


// 注册简码以显示产品分类
function my_custom_product_categories_shortcode() {
    $categories = get_terms('product_cat', array(
        'hide_empty' => false,
    ));
$current_category = single_cat_title('', false);

    $output = '<div class="my-custom-categories">';
    foreach ($categories as $category) {
		$class=$current_category==$category->name?'active':'';
		
        $output .= sprintf('<a class="%s" href="%s">%s</a>',
						   $class,
            esc_url(get_term_link($category)),
            esc_html($category->name)
        );
    }
    $output .= '</div>';

    return $output;
}
add_shortcode('my_product_categories', 'my_custom_product_categories_shortcode');

　　下面是实现这个该功能的的一个简单的css代码，具体可以根据需求进行更改

/* 自定义产品分类样式 */
.my-custom-categories {
   
    margin-bottom: 30px; /* 或根据您的布局调整 */
}

.my-custom-categories a {
    display: block;
    padding: 10px;
    margin: 5px 0;
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.my-custom-categories a:hover {
    background-color: #eaeaea;
}

　　在简码中插入

[my_product_categories]

　　即可实现上面的效果

 

 

下面这个是获取最新的四个产品以及搜索，一般用于产品展示页面的左侧或者右侧，图片大小在css代码里面可以进行修改，下面是效果图

 在function.php里面的简码是

//获取最新的四个产品
function my_latest_products_shortcode() {
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 4,
        'orderby' => 'date',
        'order' => 'DESC'
    );

    $loop = new WP_Query($args);
    $output = '<div class="latest-products-container">';

    while ($loop->have_posts()) : $loop->the_post();
        $thumbnail_id = get_post_thumbnail_id();
        $thumbnail_url = wp_get_attachment_image_src($thumbnail_id, 'full', true);
        $output .= '<div class="latest-product">';
        $output .= '<a href="' . get_the_permalink() . '" class="latest-product-link">';
        $output .= '<div class="latest-product-img">';
        $output .= '<img src="' . $thumbnail_url[0] . '" alt="' . get_the_title() . '"/>';
        $output .= '</div>';
        $output .= '<div class="latest-product-title">';
        $output .= '<h3>' . get_the_title() . '</h3>';
        $output .= '</div>';
        $output .= '</a>';
        $output .= '</div>';
    endwhile;

    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}

add_shortcode('my_latest_products', 'my_latest_products_shortcode');




//搜索产品
function my_product_search_shortcode() {
    $output = '<form role="search" method="get" class="search-form" action="' . esc_url(home_url('/')) . '">
        <input type="search" class="search-field" placeholder="Keyword" value="' . get_search_query() . '" name="s" />
        <input type="submit" class="search-submit" value="Search" />
        <input type="hidden" value="product" name="post_type" />
    </form>';

    return $output;
}

add_shortcode('my_product_search', 'my_product_search_shortcode');

　　下面是如上图的一个简单的css样式效果代码，具体样式可以根据自己需求进行更改

//产品搜索的样式代码
.search-form {
    display: flex;
    margin-bottom: 20px;
}

.search-field {
    flex-grow: 1;
    margin-right: 10px;
    padding: 5px;
}

.search-submit {
    padding:  5px;
}




//最新的四个产品样式代码
.latest-products-container {
    display: flex;
    flex-direction: column;
}

.latest-product {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.latest-product-link {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.latest-product-img {
    margin-right: 10px;
}

.latest-product-img img {
    width: 87px; /* 或根据您的需要调整 */
    height: 87px; /* 或根据您的需要调整 */
    object-fit: cover; /* 保持图片比例 */
}

.latest-product-title h3 {
    color: #373937;
    font-weight: 400;
    margin: 0;
    font-size: 16px; /* 根据您的需要调整 */
}
/* 选中前三个产品项 */
.latest-product:nth-child(-n+3) {
    border-bottom: 2px solid #F3F3F3;
    padding-bottom: 15px;
}

/* 最后一个产品项没有底部边距 */
.latest-product:last-child {
    margin-bottom: 0;
}

　　在简码中插入下面代码是搜索的

[my_product_search]

　　在简码中插入下面代码是最新产品展示的

[my_latest_products]

　　

 

 

在文章页面，会有一个文章最新文章前三个的展示，只展示标题，效果图如下

 在function.php里面的简码如下，

//前三个最新文章
function my_latest_news_shortcode() {
    $args = array(
        'posts_per_page' => 3, // 获取三篇最新的文章
        'orderby' => 'date', // 按日期排序
        'order' => 'DESC', // 最新的文章在前
    );

    $latest_posts = new WP_Query($args);
    $output = '<div class="latest-news-container">';

    if ($latest_posts->have_posts()) {
        $count = 0;
        while ($latest_posts->have_posts()) {
            $latest_posts->the_post();
            $count++;
            $output .= '<div class="latest-news-item">';
            $output .= '<a href="' . get_permalink() . '" class="latest-news-link">' . get_the_title() . '</a>';
            if ($count < 3) {
                $output .= '<hr class="latest-news-divider">';
            }
            $output .= '</div>';
        }
    } else {
        $output .= '<p>No news found.</p>';
    }

    wp_reset_postdata();
    $output .= '</div>';

    return $output;
}
add_shortcode('my_latest_news', 'my_latest_news_shortcode');

　　下面是如上图的一个简单的样式css代码

.latest-news-container {
    /* 根据需要调整 */
}

.latest-news-item {
    margin-bottom: 10px; /* 为每个新闻条目添加间距 */
}

.latest-news-link {
    display: block; /* 使链接占据整行 */
    white-space: nowrap; /* 确保文本不会换行 */
    overflow: hidden; /* 隐藏超出容器的文本 */
    text-overflow: ellipsis; /* 用省略号表示超出的文本 */
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 根据需要调整颜色 */
    /* 可能还需要其他样式 */
}

.latest-news-divider {
    border: none;
    height: 1px;
    background-color: #ccc; /* 分隔线的颜色 */
    margin-bottom: 10px; /* 分隔线和下一条新闻之间的间距 */
}

　　在简码中插入

[my_latest_news]

　　

 

在产品详情页面 ，会有上一个产品，下一个产品的快捷按钮，以及当前产品详情分类下的别的相关产品展示，注意，这里相关产品只展示三个，效果图如下

 

 

在function.php中插入如下代码

//上一个产品/下一个产品
function my_navigation_shortcode() {
    $prev_post = get_previous_post();
    $next_post = get_next_post();
    $output = '<div class="navigation-container">';

    if (!empty($prev_post)) {
        $output .= '<a href="' . get_permalink($prev_post->ID) . '" class="nav-link prev-link">Previous</a>';
    } else {
        $output .= '<span class="nav-link prev-link disabled">No Information</span>';
    }

    if (!empty($next_post)) {
        $output .= '<a href="' . get_permalink($next_post->ID) . '" class="nav-link next-link">Next</a>';
    } else {
        $output .= '<span class="nav-link next-link disabled">No Information</span>';
    }

    $output .= '</div>';
    return $output;
}
add_shortcode('my_navigation', 'my_navigation_shortcode');


//产品详情下面的相关产品
function my_related_products_shortcode() {
    // 获取当前产品的分类
    $terms = wp_get_post_terms(get_the_ID(), 'product_cat');
    if (empty($terms)) return ''; // 如果没有分类，返回空

    $term_ids = wp_list_pluck($terms, 'term_id');

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 3,
        'orderby' => 'rand',
        'post__not_in' => array(get_the_ID()), // 排除当前产品
        'tax_query' => array(
            array(
                'taxonomy' => 'product_cat',
                'field' => 'id',
                'terms' => $term_ids,
            ),
        ),
    );

    $related_products = new WP_Query($args);
    $output = '<div class="related-products-container">';

    if ($related_products->have_posts()) {
        while ($related_products->have_posts()) {
            $related_products->the_post();
            global $product;
            $output .= '<div class="related-product-item">';
            $output .= '<a href="' . get_the_permalink() . '" class="related-product-link">';
            $output .= '<img src="' . get_the_post_thumbnail_url(get_the_ID(), 'full') . '" alt="' . get_the_title() . '" class="related-product-image">';
            $output .= '<div class="related-product-title">' . get_the_title() . '</div>';
            $output .= '</a>';
            $output .= '</div>';
        }
    } else {
        $output .= '<div class="no-related-products">No related products found.</div>';
    }

    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}
add_shortcode('my_related_products', 'my_related_products_shortcode');

　　下面是样式css代码

//上一个、下一个产品
/* 导航容器样式 */
.navigation-container {
    display: flex;
    justify-content: space-between; /* 两个按钮之间有间隙 */
    margin-top: 20px; /* 与内容的距离 */
}

/* 单个导航链接样式 */
.navigation-container .nav-link {
    width: 48%; /* 按钮宽度为容器的48% */
    padding: 25px; /* 内边距 */
    text-align: center; /* 文本居中 */
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #ddd; /* 边框颜色 */
    transition: border 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
    box-sizing: border-box; /* 盒模型设置 */
    text-decoration: none; /* 移除文本下划线 */
    color: #000; /* 文字颜色 */
}

/* 悬停效果 */
.navigation-container .nav-link:hover {
    border-top: 2px solid #1d2087; /* 悬停时上边框 */
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); /* 盒阴影 */
}

/* 禁用链接样式 */
.navigation-container .nav-link.disabled {
    color: #ccc; /* 禁用链接的文字颜色 */
    cursor: not-allowed; /* 鼠标样式 */
    border: 1px solid #ccc; /* 禁用状态的边框颜色 */
}



//相关产品
.related-products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 控制项目之间的间隙 */
    margin-bottom: 20px;
}

.related-product-item {
    flex: 0 1 calc(33.333% - 10px); /* 让每个项目占据1/3的容器宽度，减去间隙 */
    border: 1px solid #e3e3e3; /* 项目边框 */
    text-align: center; /* 文本居中 */
    margin-bottom: 10px; /* 项目底部的间隙 */
}

.related-product-image {
    width: 359px;
    height: 359px;
    object-fit: cover; /* 保持图片的宽高比 */
}

.related-product-title {
    padding: 10px 0; /* 上下内边距 */
}

.related-product-link {
    text-decoration: none;
    color: inherit; /* 继承字体颜色 */
}

.no-related-products {
    text-align: center;
    padding: 20px;
}

/* 其他样式保持不变 */

.related-product-image {
    width: 359px;
    height: 359px;
    object-fit: cover; /* 保持图片的宽高比 */
    transition: transform 1200ms ease; /* 平滑变换效果 */
    display: block; /* 修复内联元素的变形问题 */
}

.related-product-link:hover .related-product-image {
    transform: scale(1.05); /* 鼠标悬停时放大1.1倍 */
}

　　下面是插入的简码，上下个产品

[my_navigation]

　　产品详情页面的相关产品

[my_related_products]

　　

标签：常用,简码,shortcode,product,related,WordPress,output,my,latest
From： https://www.cnblogs.com/Boboschen/p/17895793.html

相关文章

  • 深度学习面试常用代码：MHA/MQA/GQA/LN/BN/位置编码代码
    深度学习常用代码参考:https://zhuanlan.zhihu.com/p/6505754261.MHA(MultiHeadAttention)代码实现#1.MHA实现importtorchimporttorch.nnasnnimporttorch.nn.functionalasFclassScaleDotProductAttention(nn.Module):def__init__(self,):......
  • js Object常用的方法
    Object.keys(obj)Object.keys(obj)：返回对象自身所有可枚举属性的键名数组处理对象，返回可枚举的键数组constobject1={a:'somestring',b:42,c:false};console.log(Object.keys(object1));//结果:Array["a","b","c"]处理数组和字符串，返回索引值数组......
  • 在自动化测试时，Python常用的几个加密算法，你有用到吗
    本文分享自华为云社区《『加密算法』|自动化测试时基于Python常用的几个加密算法实现，你有用到吗？》，作者：虫无涯。写在前边这几天做自动化测试，遇到一个问题，那就是接口的请求的密码是加密的；产品的要求是不能使用其他特殊手段，他给提供加密算法，需要在接口请求的时候，使用加密算法处......
  • Python语言合并列表元素常用的方法！
    众所周知，列表是Python中常见的数据类型，它可以存储多个元素。但由于某种需求，我们有时候需要将多个元素进行合并，那么Python语言如何合并列表中的元素?以下是常用方法介绍。1、使用+运算符在Python中，可以使用+运算符将两个列表的元素合并成一个新的列表。例如，假设有两个列......
  • 列举不少于5个springMVC的常用的注解,并说明注解的作用
    列举不少于5个springMVC的常用的注解,并说明注解的作用;SpringMVC中有许多注解用于简化和增强控制器、请求映射、数据绑定等方面的操作。以下是不少于5个常用的SpringMVC注解及其作用：@Controller:作用：用于标识一个类是SpringMVC中的控制器，它处理客户端的请求。被注解为@......
  • jmeter常用配置、脚本
    一、CSV数据文件读取、和写入CSV读取MYSQL数据库的配置可参考：https://www.cnblogs.com/snailon/articles/17102671.html1.读取CSV文件（读取文件可以放bin目录下，就可以不用写绝对路径，写文件名称即可）2.提取的值（encryToken，signToken，vin，userId）写入csv，代码如下：FileWriterfstream......
  • 51单片机常用子函数大全
    1定时器0、1模块Time01.c代码#include<REGX52.H>#defineFOSC11059200L#defineT1MS(65536-FOSC/12/1000)//1000个1ms是1s，10ms中断的话，1000改成100voidTime0_init(void) //1毫秒@11.0592MHz{ TMOD&=0xF0; //设置定时器016位模式 TMOD|=0x01; //设置定时器......
  • Python Numpy 数据分析常用数学运算
    Python的NumPy库是数据分析和科学计算的核心库之一，提供了广泛的数学运算功能，使得处理大型多维数组和矩阵运算变得简单高效。NumPy是进行数据分析和科学计算的基石，掌握其数学运算功能对于进行有效的数据处理和分析至关重要。本文主要介绍PythonNumpy中数据分析常用数学运算......
  • Git常用命令
    Git常用命令1分支Branch查看分支查看本地分支gitbranch查看远程分支gitbranch-r创建分支gitbranch新分支名称推送到远程//gitpushorigin本地_分支名称:远程_分支名称(没有会自动创建)gitpushoriginbranch_v1.0.0:branch_v1.0.0切换......
  • wordpress整合 Prism.js实现代码高亮 切图网自用
    Prism.js是一个简约漂亮的代码高亮插件，就冲简单好用就值得一用，如何把它整合到wordpress，附代码，也是切图网自己再用的。代码添加到主题的functions.php中//自定义代码高亮按钮functionappthemes_add_quicktags(){if(wp_script_is('quicktags')){?><s......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99