WP独立站开发&谷歌广告ADS

8年WordPress Woocommerce独立站开发和谷歌广告推广经验!

我的技能条

WordPress
PHP
Google广告
独立站运营策划

最新动态

5 月 2024

no entry, traffic restriction, prohibited

【纯代码】WordPress屏蔽指定国家访客访问网站

在某些情况下,我们不想让一些国家的访客访问我们的网站,所以就需要屏蔽该国家的IP地址。WordPress有不少插件可以实现该功能,但都比较繁琐,比如需要注册账户下载IP数据包,最致命的是这种插件往往和缓存插件有冲突。用起来没那么顺手,于是我找到了下面的一种方法: 将下面的代码添加到后台的外观-主题文件编辑器-functions.php文件: function ip_info($ip = NULL, $purpose = "location", $deep_detect = TRUE) { $output = NULL; if (filter_var($ip, FILTER_VALIDATE_IP) === FALSE) { $ip = $_SERVER["REMOTE_ADDR"]; if ($deep_detect) { if (filter_var(@$_SERVER['HTTP_X_FORWARDED_FOR'], FILTER_VALIDATE_IP)) $ip...

WordPress如何输出显示Advanced Custom Fields的自定义字段到前端

WordPress平台下的Advanced Custom Fields (ACF) 是一个非常流行的自定义字段插件,它允许你轻松地添加、存储和显示自定义字段。对于很多新手朋友来说,安装完插件,跟着教程走一遍就知道如何给product产品或文章添加自定义字段了。但可能会面临一个比较尴尬的问题,不知道如何将添加的自定义字段输出显示到前端,今天就用一个案例的形式给大家讲解一下: 首先我们已经在后台给产品模块添加了2个自定义字段,如下图所示: 接下来就先看效果,将上面的2个自定义字段显示在产品详情页和产品分类页的加购按钮的下面,如下图所示: 自定义字段显示在产品详情页的加购按钮的下面 自定义字段显示在产品分类页的加购按钮的下面 最后给大家分享一下代码: function display_acf_fields(){ if(get_field('gtin')){ echo '<p>GTIN: ' . get_field('gtin') . '</p>';//注意:这里的gtin字段属性对应插件acf里面的Field Name } if(get_field('mpn')){ echo '<p>MPN: ' . get_field('mpn') . '</p>'; } } add_action('woocommerce_after_add_to_cart_form','display_acf_fields');//显示在产品详情页的加购按钮下面 add_action('woocommerce_after_shop_loop_item','display_acf_fields');//显示在产品分类页的加购按钮下面 将上面的代码添加到后台外观-主题文件编辑器-模板函数functions.php文件即可; 注意:不同的模版结构不同,所以上面的代码不一定会在你的模版里面生效;

orange plastic blocks on white surface

CSS修改表单占位符placeholder的字体大小

在对网站的前端进行自定义时,可能会遇到修改表单占位符placeholder的字体大小这个问题。此时需要使用::placeholder伪元素,参考代码如下: input::placeholder { font-size: 18px; } .input-class::placeholder { font-size: 18px; } #input-id::placeholder { font-size: 22px; }  

Woocommerce自定义变量产品变体的自定义字段并输出到前台

本案例属于WordPress woocommerce二次开发的一个高级教程,涉及到变量产品如何新增每个变体的自定义字段【UPC字段】以及如何将该自定义字段输出到前台产品页面的指定位置; 先上效果图: 后台的自定义字段,每个变体都有一个独立的UPC自定义字段: 前台显示效果:根据每个变体显示动态的UPC和SKU:   本案例使用的代码,直接将下面的代码添加到WordPress后台的外观-主题文件编辑器-functions.php文件即可: // Add UPC field to product variations from specific variable products function add_variation_setting_fields( $loop, $variation_data, $variation ) { $field_key = 'upc_field'; // Display the label and input together echo '<p class="form-row form-row-full">'; woocommerce_wp_text_input( array(...

Woocommerce修改添加购物车按钮文本

在WordPress woocommerce独立站实际运营过程中,我们可能会对添加购物车【add to cart】这个默认的文本进行自定义修改,大部分情况下可以用插件直接解决,但插件一般比较臃肿,几行代码搞定的事儿,就不用去费力的安装插件了: // 修改产品归档页购物车按钮文字 function woocommerce_custom_product_add_to_cart_text() { return __( 'Buy Now', 'woocommerce' ); } add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_product_add_to_cart_text' ); // 修改单个产品页面的购物车按钮文字 function woocommerce_custom_single_add_to_cart_text() { return __( 'Buy Now', 'woocommerce' ); } add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text' );  

white smartphone on two softbound books

position: sticky置顶菜单栏不生效的解决办法

现在很多网站都比较流行这个功能:当往下滚动页面时,导航菜单栏需要固定在顶部,这样方便访客快捷操作。比较好用的一个方法就是使用CSS的position: sticky属性。但由于该属性会受到多种因素的影响从而失效。本教程给出了一个解决办法。 默认情况下,我们可以用下面的CSS代码来控制菜单栏在鼠标下滑滚动时置顶菜单栏,让菜单栏一直可见,比如菜单栏所在的div class为menu: .menu { position: sticky; top: 0px; z-index: 10000000000; } 但有个例外,如果你的菜单栏所属div层级比较复杂,比如菜单栏的div上面还有多个父级div,此时,上面的代码可能会失效;我们可以对上面的代码稍加改动;比如菜单栏所在的上一级div class为header: .header { position: sticky; top: -110px;//这个值需要根据实际情况调整 z-index: 10000000000; } 附加:导致position: sticky置顶菜单栏不生效的几个原因: 父元素的影响:确保没有父元素具有 overflow: hidden, overflow: scroll 或 overflow: auto 的样式。这些样式会阻止 sticky 属性的正常工作。 祖先元素的高度:如果菜单栏的祖先元素(不直接是父元素)高度不足,或者没有足够的可滚动空间,sticky 也可能不会工作。 ...

利用CSS的nth-child属性控制多个相同的元素

首先我们看这段代码: <p class="forminator-row">The first paragraph.</p> <p class="forminator-row">The second paragraph.</p> <p class="forminator-row">The third paragraph.</p> <p class="forminator-row">The fourth paragraph.</p> 如果我想单独控制第一个或第二个的CSS属性,此时就需要借助nth-child属性,用法如下: .forminator-row:nth-child(1){ background:#ccc; } .forminator-row:nth-child(2){ background:red; } 案例:

修复WordPress独立站结账页面的收货地址标题BUG

当客户到达WordPress独立站的结账页面时,需要首先输入邮箱地址等信息,不知道你有没有发现,输入邮箱地址等信息这个模块的标题,大部分的情况下,会默认显示为Billing details或者Billing & Shipping【至于显示哪个标题,可以到后台的woocommerce-settings-shipping-Shipping settings-Shipping destination路径进行更改,但这里的更改都不能直接显示为Shipping收货地址,所以姑且算是一个BUG】。有时候会给客户造成一个干扰,这里到底是输入Shipping收货地址还是Billing账单地址? 为了打消客户这个困扰,我们可以直接对标题进行修改,改为Shipping收货地址,不就解决问题了! 效果图如下所示: 直接将下面的代码添加到WordPress后台的外观-主题文件编辑器-functions.php文件即可: add_filter('gettext', 'change_billing_details_title', 20, 3); function change_billing_details_title($translated_text, $text, $domain) { if ($text === 'Billing details' && is_checkout()) { $translated_text = 'Shipping Info'; } return $translated_text; }  

Woocommerce后台产品列表添加Tag标签筛选过滤器

WordPress woocommerce独立站后台的产品列表,默认有产品类目、产品类型、产品库存这几个筛选过滤器,今天我们在这个基础上面新增一个Tag标签筛选过滤器,首先看效果图: 代码如下: //新增Tag标签筛选过滤器@WordPress后台产品列表 function add_filter_by_tag_products( $output ) { global $wp_query; $output .= wc_product_dropdown_categories( array( 'show_option_none' => 'Filter by product tag', 'taxonomy' => 'product_tag', 'name' => 'product_tag', 'selected' => isset( $wp_query->query_vars['product_tag'] ) ? $wp_query->query_vars['product_tag'] : '', ) ); return $output; } add_filter( 'woocommerce_product_filters',...

person holding black android smartphone

点击即聊:如何在网站上集成WhatsApp链接【支持唤醒客户端】

在今天的数字化时代,社交媒体的集成已成为网站功能的重要组成部分。特别是对于那些希望提高客户服务和即时沟通能力的企业来说,集成像WhatsApp这样的即时通讯工具变得尤为重要。 如何在您的网站上添加WhatsApp链接: WhatsApp提供了一个非常便捷的功能——“Click to Chat”,允许用户通过点击一个简单的链接就能够开始与您的业务进行对话。这个功能不仅支持移动设备,也适用于桌面用户。以下是创建此类链接的步骤: 1. 基本的WhatsApp链接格式如下:这里的数字代表您的完整电话号码,使用国际格式且不包含任何前导零、括号或破折号。 https://wa.me/1234567890 2. 添加预设文本:如果您希望链接中包含预设的消息文本,可以在链接后添加`?text=您的消息`,如下所示: https://wa.me/1234567890?text=Hello