wordpress开发网页的问题总结

Mangol
404 阅读4分钟

前言

使用WordPress开发网页已有一段时间，从使用bluehost搭建服务器到下载插件建立起整个网页界面，都是别人先前已经做好的，我属于在前人解决不了一些技术问题的情况下，阶段性处理此网页的开发。

起初觉得WordPress这开发工具是适合不会开发的人使用的，只需要简单的拖拉拽组件形成一个页面就够了，以为可以轻而易举完成这项任务。

后来才发现完成它会用到一些技术，也会因为在寻找WordPress一些设置去更改样式时，会很耗时，你知道的，对于普通网页，只需要改几行代码，然后ctrl+c、v就可以搞定的样式效果，却要花费两三小时去搜索如何设置，并且在几个相似的页面来回调整统一样式。

因此，我总结了一些经验，适合初级前端开发参考，希望可以收获更多建议。

个人想法，如有不妥，敬请谅解。

遇到的问题

  1. 经常花许多时间寻找熟悉设置，比如怎么改菜单、网页链接名称。

  2. 如果在网页上放svg格式的图片，图片文件里有的样式命名重复了，导致图片显示的颜色出错。

  3. 给来一个需求是做拖动滑块的效果，花时间熟悉了全部已有的elementor里的组件却都没法做到这个，因此用html组件单独引入代码实现。

HTML组件.png

  1. 更改每个页面的顶部横幅背景图要一个个页面去更改，几十个页面都换的话，是一套低端重复性耗时的操作，但要是改代码，只能全部页面统一一张图。

  2. 产品觉得woocommerce商店插件里的购物车页面的table表格比较丑，因此在组件里写css实现div简单布局的效果。（也可以改php文件里的html）

  3. 需求要求将购物车的信息通过邮件发送出去，我在woocommerce商店插件的php文件里写了一个方法去获取购物车的信息，作为了一个简码，在发送邮件的时候就可以顺带发送去。

//woocommerce.php发送邮件订单信息的简码
function orderMail()
{
	foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) {
		$_product = apply_filters('woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key);

		if ($_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters('woocommerce_checkout_cart_item_visible', true, $cart_item, $cart_item_key)) {
?>
				<tr class="<?php echo esc_attr(apply_filters('woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key)); ?>">
					<td class="product-name">
						<?php echo wp_kses_post(apply_filters('woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key)) . '&nbsp;'; ?>
						<?php echo apply_filters('woocommerce_checkout_cart_item_quantity', ' <strong class="product-quantity">' . sprintf('&times;&nbsp;%s', $cart_item['quantity']) . '</strong>', $cart_item, $cart_item_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
						<?php echo wc_get_formatted_cart_item_data($cart_item); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>：
					</td>
					<td class="product-total">
						<?php echo apply_filters('woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal($_product, $cart_item['quantity']), $cart_item, $cart_item_key); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>，      
					</td>
				</tr>
				<?php
		}
	}
	echo '合计：';
	echo wc_cart_totals_order_total_html();
	echo '。';

}
add_shortcode('orderMail_shortcode', 'orderMail');
  1. woocommerce商店插件更新后，把我在插件文件编辑器里改的php代码一部分复原了，幸好有备份，改回去了，为了防止后来又突然更新导致显示错误，我把插件阻止更新了。
add_filter( 'auto_update_plugin', 'wc_prevent_dangerous_auto_updates', 99, 2 );
//在wc-core-functions.php文件里更改成
add_filter( 'auto_update_plugin', '__return_false' );

  1. 使用低版本的浏览器，会看到显示有问题，但现在也很少人会使用了。

  2. 遇到浏览器打开网页不显示图片，要刷新好几次才正常显示，网速慢或者网络信号不稳定导致图片加载速度慢。或者是浏览器缓存有之前的图片，后面换新图要重新加载那几张图。清理浏览器缓存重新打开就好了，或者使用无痕模式打开。

总结

  1. 形成记录操作笔记的习惯。
  2. svg格式的图片要使每个样式的命名不重复。
  3. 更多了解网页的组件设计、审美和需求。
  4. 频繁更改组件样式，比起之前一直做页面单调的后台管理系统来说，巩固学会更多css。
  5. 一些插件（woocommerce）的代码可以从网上获取，在vscode按需更改后导入或者同步。
  6. 多备份网页，防止出问题时应对。
  7. 可了解一些php后端语言。
  8. 了解网页优化：压缩图片、压缩代码、下载插件。使用需要付费的elementor插件的话，可以省去一些其他插件，提高网页加载速度。
  9. 熟悉css浏览器的适配。
  10. 图片seo,图片元素具备alt属性。
  11. 图片和页面链接最好使用英文命名，如果是中文有可能会URL Encode出问题，在以后连接时可能会无法连接到，有的版本对于中文字符的处理能力也低。
avatar
文章
阅读
粉丝