资源申请

机器

阿里云购买机器，最低需要2.0G内存，低于这个安装Woo Commerce插件的时候会有bug
记得需要有外网ip可供访问

域名

阿里云购买即可

证书

直接使用免费证书
https://freessl.cn/
按照指示部署好 ACME

LNMP部署

安装基础软件

apt update 
apt install nginx php-fpm mysql-server

修改nginx配置

vim /etc/nginx/sites-available/default

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    return 301 https://$host$request_uri;
}
server {
    #listen  default_server;
    #listen [::]:80 default_server;

    # SSL configuration
    #
     listen 443 ssl default_server;
     listen [::]:443 ssl default_server;
     ssl_certificate /root/.acme.sh/nntall.com_ecc/fullchain.cer;
ssl_certificate_key /root/.acme.sh/nntall.com_ecc/nntall.com.key;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;
    gzip off;
    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.php index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }

    # pass PHP scripts to FastCGI server
    #
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
        fastcgi_pass unix:/run/php/php8.1-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#   listen 80;
#   listen [::]:80;
#
#   server_name example.com;
#
#   root /var/www/example.com;
#   index index.html;
#
#   location / {
#       try_files $uri $uri/ =404;
#   }
#}

安装wordpress

基本遵循官方的安装方案
https://developer.wordpress.org/advanced-administration/before-install/howto-install/

数据库创建

CREATE DATABASE wordpress CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

CREATE USER "wordpress"@"localhost" IDENTIFIED BY "xxxxxxxxxx";


GRANT ALL PRIVILEGES ON wordpress.* TO "wordpress"@"localhost";

FLUSH PRIVILEGES;

EXIT;

下载和解压wp

 wget https://wordpress.org/latest.zip
apt install unzip
unzip latest.zip
cp -r /root/wordpress/* /var/www/html/

修改wp-config配置

主要是修改数据库配置和自动生成
https://api.wordpress.org/secret-key/1.1/salt/

 vim wp-config.php

<?php
define( 'WP_CACHE', true );

/**
 * The base configuration for WordPress
 *
 * The wp-config.php creation script uses this file during the installation.
 * You don't have to use the website, you can copy this file to "wp-config.php"
 * and fill in the values.
 *
 * This file contains the following configurations:
 *
 * * Database settings
 * * Secret keys
 * * Database table prefix
 * * ABSPATH
 *
 * @link https://wordpress.org/documentation/article/editing-wp-config-php/
 *
 * @package WordPress
 */

// ** Database settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'wordpress' );

/** Database username */
define( 'DB_USER', 'wordpress' );

/** Database password */
define( 'DB_PASSWORD', 'xxxxx' );

/** Database hostname */
define( 'DB_HOST', 'localhost' );

/** Database charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8mb4' );

/** The database collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );

/**#@+
 * Authentication unique keys and salts.
 *
 * Change these to different unique phrases! You can generate these using
 * the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}.
 *
 * You can change these at any point in time to invalidate all existing cookies.
 * This will force all users to have to log in again.
 *
 * @since 2.6.0
 */
define('AUTH_KEY',         '|[^?SF8sVJFf_)7hN2B#xxxx<TGj|tD:$ORE,G1`m@4p-NgU:O;+=&56sJ2PbS`#H');
define('SECURE_AUTH_KEY',  '&o8nzJFKO/Zv:%.=m/zp2KitcJI_1[U~5<|W<7(-uUi+b!Ps8Got^AJ$Sw[!Zp+x');
define('LOGGED_IN_KEY',    'xxx_s++7IT;:j$t>Iz]wHt_/6');
define('NONCE_KEY',        '[-kC}p7o)K>7-,V%.=-2*xxxxiZ-IY?@`H-d_7sW%Tz0%bsd./Sw/};*kPm7Jx}Wc=');
define('AUTH_SALT',        '.~l[BqEv|q!$m6x+^<L{ 7]xxx8=[| o`Z2(H-^6aNm7U{%*Bko6E-|?XDX2-RbY?*L');
define('SECURE_AUTH_SALT', 'G AUu)qv?1]cM|%S[9Bxxx[./,-&5oP!S+Ybeo;n+a>bE3(u$#?MPlbI?Cv|.4yh|6}');
define('LOGGED_IN_SALT',   'i6*J5oX-z:>gYP8&xxx%UY*O,P!`.IhhO=L 3Ot0L;F@]SH{=H{<o0`p(y-qkW)|>@B');
define('NONCE_SALT',       's(VtDjKH~E7CM`-|!<$I4xxxTF+LE6!JZ,6-gZ#`1I5rh@Y+xbD}1-heGr-b[F/c$nd');
/**#@-*/

/**
 * WordPress database table prefix.
 *
 * You can have multiple installations in one database if you give each
 * a unique prefix. Only numbers, letters, and underscores please!
 */
$table_prefix = 'wp_';

/**
 * For developers: WordPress debugging mode.
 *
 * Change this to true to enable the display of notices during development.
 * It is strongly recommended that plugin and theme developers use WP_DEBUG
 * in their development environments.
 *
 * For information on other constants that can be used for debugging,
 * visit the documentation.
 *
 * @link https://wordpress.org/documentation/article/debugging-in-wordpress/
 */
define( 'WP_DEBUG', false );

/* Add any custom values between this line and the "stop editing" line. */



/* That's all, stop editing! Happy publishing. */

/** Absolute path to the WordPress directory. */
if ( ! defined( 'ABSPATH' ) ) {
    define( 'ABSPATH', __DIR__ . '/' );
}

/** Sets up WordPress vars and included files. */
require_once ABSPATH . 'wp-settings.php';

记得修改文件夹权限

chown -R  www-data html

直接进入

http://xxxx/wp-admin/install.php
按照引导安装完成即可

安装woo commerce

确保文件夹给了权限后直接
plugin-> add new plugin 搜索安装即可

其他修改

价格展示顺序和模板

我想要的效果如下

商品详情页

列表页

首先修改展示顺序

vim /var/www/html/wp-content/plugins/woocommerce/includes/wc-formatting-functions.php

其实就是调换了一个顺序

function wc_format_sale_price( $regular_price, $sale_price ) {
        // Format the prices.
        $formatted_regular_price = is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price;
        $formatted_sale_price    = is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price;

        // Add the sale price.
        $price = '<ins aria-hidden="true">' . $formatted_sale_price . '</ins>';

        // For accessibility (a11y) we'll also display that information to screen readers.
        $price .= '<span class="screen-reader-text">';
        // translators: %s is a product's current (sale) price.
        $price .= esc_html( sprintf( __( 'Current price is: %s.', 'woocommerce' ), wp_strip_all_tags( $formatted_sale_price ) ) );
        $price .= '</span>';


        // Strikethrough pricing.
        $price .= '<del aria-hidden="true">' . $formatted_regular_price . '</del> ';

        // For accessibility (a11y) we'll also display that information to screen readers.
        $price .= '<span class="screen-reader-text">';
        // translators: %s is a product's regular price.
        $price .= esc_html( sprintf( __( 'Original price was: %s.', 'woocommerce' ), wp_strip_all_tags( $formatted_regular_price ) ) );
        $price .= '</span>';

        return apply_filters( 'woocommerce_format_sale_price', $price, $regular_price, $sale_price );
}

增加css全局样式

.wc-block-components-product-price del {
    color: gray;
     padding-left: 10px;
}


.single-product .wc-block-components-product-price del {
    font-size: medium;
}


.wc-block-components-product-price > span {
    color: var(--wp--preset--color--contrast-2);
}

.wc-block-components-product-price > ins {
    color: var(--wp--preset--color--contrast-2);
}

tips

wordpress用了古堡编辑器以后已经非常厉害了，直接自己编辑即可，不过目前的问题是提供的block有点少，这个还需要研究怎么处理，不过整体问题不大。