init
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
<?php
|
||||
/**
|
||||
* The template for displaying 404 pages
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="main" class="site-main">
|
||||
<section class="error-404 not-found">
|
||||
<header class="page-header">
|
||||
<h1 class="page-title">404 - 页面未找到</h1>
|
||||
</header>
|
||||
|
||||
<div class="page-content">
|
||||
<p>抱歉，您访问的页面不存在。可能是链接已失效或地址输入错误。</p>
|
||||
<p>请检查网址是否正确，或返回<a href="<?php echo esc_url( home_url( '/' ) ); ?>">首页</a>继续浏览。</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
<?php
|
||||
/**
|
||||
* The template for displaying archive pages
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="main" class="site-main">
|
||||
<header class="page-header">
|
||||
<?php
|
||||
the_archive_title( '<h1 class="page-title">', '</h1>' );
|
||||
the_archive_description( '<div class="archive-description">', '</div>' );
|
||||
?>
|
||||
</header>
|
||||
|
||||
<?php if ( have_posts() ) : ?>
|
||||
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<header class="entry-header">
|
||||
<h2 class="entry-title">
|
||||
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<div class="entry-summary">
|
||||
<?php the_excerpt(); ?>
|
||||
</div>
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
|
||||
<?php else : ?>
|
||||
<p><?php esc_html_e( 'No content found.', 'sewjoy-theme' ); ?></p>
|
||||
<?php endif; ?>
|
||||
</main>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
@@ -0,0 +1,409 @@
|
||||
/*
|
||||
* SewJoy Theme - Main Stylesheet
|
||||
* Simple reset and base layout
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
Global Reset
|
||||
============================================ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #d63384;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #ad1457;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Site Layout
|
||||
============================================ */
|
||||
#page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Site Header
|
||||
============================================ */
|
||||
.site-header {
|
||||
padding: 30px 0 20px;
|
||||
border-bottom: 2px solid #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-branding .site-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.site-branding .site-title a {
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-branding .site-title a:hover {
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.site-description {
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Navigation Menu
|
||||
============================================ */
|
||||
.main-navigation {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu li a {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu li a:hover,
|
||||
.main-navigation ul#primary-menu li.current-menu-item a {
|
||||
background-color: #d63384;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Main Content Area
|
||||
============================================ */
|
||||
.site-main {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.site-main article {
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.site-main article:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.entry-title a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-title a:hover {
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
color: #888;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.entry-summary {
|
||||
font-size: 1rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.entry-content p,
|
||||
.entry-summary p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Archive Page Header
|
||||
============================================ */
|
||||
.page-header {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.page-header .page-title {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.archive-description {
|
||||
margin-top: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
404 Page
|
||||
============================================ */
|
||||
.error-404 .page-title {
|
||||
font-size: 2rem;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.error-404 .page-content {
|
||||
background-color: #fef5f9;
|
||||
padding: 20px;
|
||||
border-left: 4px solid #d63384;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Sidebar / Widget Area
|
||||
============================================ */
|
||||
.widget-area {
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.widget-area .widget {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.widget-area .widget-title {
|
||||
margin: 0 0 15px;
|
||||
font-size: 1.125rem;
|
||||
color: #222;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Site Footer
|
||||
============================================ */
|
||||
.site-footer {
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.site-footer .site-info p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Page Builder / Customizer
|
||||
============================================ */
|
||||
.builder {
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.builder__title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.875rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.builder__subtitle {
|
||||
color: #666;
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
|
||||
.builder__components {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.builder-component {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.builder-component__title {
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.builder-component__options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.builder-option {
|
||||
flex: 1 1 auto;
|
||||
min-width: 90px;
|
||||
padding: 10px 18px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.builder-option:hover {
|
||||
border-color: #d63384;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.builder-option.selected,
|
||||
.builder-option.selected:hover {
|
||||
background-color: #d63384;
|
||||
border-color: #d63384;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.builder__summary {
|
||||
margin: 25px 0;
|
||||
padding: 18px 20px;
|
||||
background-color: #fef5f9;
|
||||
border-left: 4px solid #d63384;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.builder__summary-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.125rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.builder__summary-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.builder__summary-list li {
|
||||
padding: 4px 0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.builder__summary-value {
|
||||
font-weight: 600;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.builder__actions {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.builder__add-to-cart {
|
||||
padding: 12px 32px;
|
||||
background-color: #d63384;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.builder__add-to-cart:hover {
|
||||
background-color: #ad1457;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Responsive
|
||||
============================================ */
|
||||
@media screen and (max-width: 600px) {
|
||||
.site-branding .site-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/*
|
||||
* SewJoy Theme - Page Builder / Customizer Interaction
|
||||
*/
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
var $builder = $('.builder');
|
||||
if (!$builder.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle option button clicks.
|
||||
$builder.on('click', '.builder-option', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var $button = $(this);
|
||||
var component = $button.data('component');
|
||||
var option = $button.data('option');
|
||||
|
||||
if (!component || !option) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Deselect siblings within the same component group.
|
||||
$builder
|
||||
.find('.builder-component[data-component="' + component + '"] .builder-option')
|
||||
.removeClass('selected');
|
||||
|
||||
// Mark the clicked button as selected.
|
||||
$button.addClass('selected');
|
||||
|
||||
// Update the corresponding summary entry.
|
||||
var $summaryValue = $('#summary-' + component + ' .builder__summary-value');
|
||||
if ($summaryValue.length) {
|
||||
$summaryValue.text(option);
|
||||
}
|
||||
});
|
||||
|
||||
// Optional: Add-to-cart button placeholder behavior.
|
||||
$builder.on('click', '.builder__add-to-cart', function () {
|
||||
var selections = {};
|
||||
$builder.find('.builder-option.selected').each(function () {
|
||||
var $btn = $(this);
|
||||
selections[$btn.data('component')] = $btn.data('option');
|
||||
});
|
||||
|
||||
if (Object.keys(selections).length === 0) {
|
||||
console.warn('SEWJOY THEME: 请先选择组件选项');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('SEWJOY THEME: 加入购物车', selections);
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* SewJoy Theme - Main JavaScript
|
||||
*/
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Log on load
|
||||
console.log('SEWJOY THEME 已加载');
|
||||
|
||||
// Document-ready functionality
|
||||
$(function () {
|
||||
// Smooth scroll for in-page anchors
|
||||
$('a[href*="#"]:not([href="#"])').on('click', function (event) {
|
||||
var target = $(this.getAttribute('href'));
|
||||
if (target.length) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: target.offset().top - 60
|
||||
}, 600);
|
||||
}
|
||||
});
|
||||
|
||||
// Highlight current menu item visually
|
||||
$('.main-navigation li.current-menu-item, .main-navigation li.current_page_item')
|
||||
.addClass('active');
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
+19
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
/**
|
||||
* The footer template file
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
?>
|
||||
</div><!-- #content -->
|
||||
|
||||
<footer id="colophon" class="site-footer">
|
||||
<div class="site-info">
|
||||
<p>© <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></p>
|
||||
</div>
|
||||
</footer>
|
||||
</div><!-- #page -->
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<?php
|
||||
/**
|
||||
* Theme functions and definitions
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
/**
|
||||
* Sets up theme defaults and registers support for various WordPress features.
|
||||
*/
|
||||
function sewjoy_theme_setup() {
|
||||
// Let WordPress manage the document title.
|
||||
add_theme_support( 'title-tag' );
|
||||
|
||||
// Enable support for Post Thumbnails on posts and pages.
|
||||
add_theme_support( 'post-thumbnails' );
|
||||
|
||||
// Register navigation menus.
|
||||
register_nav_menus( array(
|
||||
'menu-1' => esc_html__( 'Primary', 'sewjoy-theme' ),
|
||||
) );
|
||||
}
|
||||
add_action( 'after_setup_theme', 'sewjoy_theme_setup' );
|
||||
|
||||
/**
|
||||
* Register widget areas.
|
||||
*/
|
||||
function sewjoy_theme_widgets_init() {
|
||||
register_sidebar( array(
|
||||
'name' => esc_html__( 'Sidebar', 'sewjoy-theme' ),
|
||||
'id' => 'sidebar-1',
|
||||
'description' => esc_html__( 'Main sidebar widget area.', 'sewjoy-theme' ),
|
||||
'before_widget' => '<section id="%1$s" class="widget %2$s">',
|
||||
'after_widget' => '</section>',
|
||||
'before_title' => '<h2 class="widget-title">',
|
||||
'after_title' => '</h2>',
|
||||
) );
|
||||
}
|
||||
add_action( 'widgets_init', 'sewjoy_theme_widgets_init' );
|
||||
|
||||
/**
|
||||
* Enqueue scripts and styles.
|
||||
*/
|
||||
function sewjoy_theme_scripts() {
|
||||
// Main theme stylesheet (style.css from theme root).
|
||||
wp_enqueue_style(
|
||||
'sewjoy-theme-style',
|
||||
get_stylesheet_uri()
|
||||
);
|
||||
|
||||
// Custom main stylesheet from assets/css/.
|
||||
wp_enqueue_style(
|
||||
'sewjoy-theme-main',
|
||||
get_template_directory_uri() . '/assets/css/main.css',
|
||||
array( 'sewjoy-theme-style' ),
|
||||
'1.0.0'
|
||||
);
|
||||
|
||||
// Main theme script from assets/js/ with jQuery as a dependency.
|
||||
wp_enqueue_script(
|
||||
'sewjoy-theme-main',
|
||||
get_template_directory_uri() . '/assets/js/main.js',
|
||||
array( 'jquery' ),
|
||||
'1.0.0',
|
||||
true
|
||||
);
|
||||
|
||||
// Page Builder / Customizer script, loaded in the footer with jQuery.
|
||||
wp_enqueue_script(
|
||||
'sewjoy-theme-builder',
|
||||
get_template_directory_uri() . '/assets/js/builder.js',
|
||||
array( 'jquery' ),
|
||||
'1.0.0',
|
||||
true
|
||||
);
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'sewjoy_theme_scripts' );
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
<?php
|
||||
/**
|
||||
* The header template file
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class(); ?>>
|
||||
<?php wp_body_open(); ?>
|
||||
|
||||
<div id="page" class="site">
|
||||
<header id="masthead" class="site-header">
|
||||
<div class="site-branding">
|
||||
<h1 class="site-title">
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
||||
<?php bloginfo( 'name' ); ?>
|
||||
</a>
|
||||
</h1>
|
||||
<?php
|
||||
$sewjoy_description = get_bloginfo( 'description', 'display' );
|
||||
if ( $sewjoy_description || is_customize_preview() ) :
|
||||
?>
|
||||
<p class="site-description"><?php echo esc_html( $sewjoy_description ); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<nav id="site-navigation" class="main-navigation">
|
||||
<?php
|
||||
wp_nav_menu( array(
|
||||
'theme_location' => 'menu-1',
|
||||
'menu_id' => 'primary-menu',
|
||||
'fallback_cb' => false,
|
||||
) );
|
||||
?>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="content" class="site-content">
|
||||
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
/**
|
||||
* The main template file
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="main" class="site-main">
|
||||
<?php if ( have_posts() ) : ?>
|
||||
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title"><?php the_title(); ?></h1>
|
||||
</header>
|
||||
|
||||
<div class="entry-content">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
|
||||
<?php else : ?>
|
||||
<p>SEWJOY THEME 已激活</p>
|
||||
<?php endif; ?>
|
||||
</main>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
/**
|
||||
* Template Name: 产品定制器
|
||||
*
|
||||
* A custom page template that renders the product customizer UI.
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="main" class="site-main site-main--builder">
|
||||
<section class="builder">
|
||||
<header class="builder__header">
|
||||
<h1 class="builder__title">定制你的产品</h1>
|
||||
<p class="builder__subtitle">从以下组件中选择你的偏好，打造独一无二的商品。</p>
|
||||
</header>
|
||||
|
||||
<div class="builder__components">
|
||||
<!-- Component A -->
|
||||
<fieldset class="builder-component" data-component="A">
|
||||
<legend class="builder-component__title">组件A</legend>
|
||||
<div class="builder-component__options">
|
||||
<button type="button" class="builder-option" data-component="A" data-option="A1">选项1</button>
|
||||
<button type="button" class="builder-option" data-component="A" data-option="A2">选项2</button>
|
||||
<button type="button" class="builder-option" data-component="A" data-option="A3">选项3</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Component B -->
|
||||
<fieldset class="builder-component" data-component="B">
|
||||
<legend class="builder-component__title">组件B</legend>
|
||||
<div class="builder-component__options">
|
||||
<button type="button" class="builder-option" data-component="B" data-option="B1">选项1</button>
|
||||
<button type="button" class="builder-option" data-component="B" data-option="B2">选项2</button>
|
||||
<button type="button" class="builder-option" data-component="B" data-option="B3">选项3</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Component C -->
|
||||
<fieldset class="builder-component" data-component="C">
|
||||
<legend class="builder-component__title">组件C</legend>
|
||||
<div class="builder-component__options">
|
||||
<button type="button" class="builder-option" data-component="C" data-option="C1">选项1</button>
|
||||
<button type="button" class="builder-option" data-component="C" data-option="C2">选项2</button>
|
||||
<button type="button" class="builder-option" data-component="C" data-option="C3">选项3</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<section class="builder__summary" aria-live="polite">
|
||||
<h2 class="builder__summary-title">当前选中的组件组合</h2>
|
||||
<ul class="builder__summary-list">
|
||||
<li id="summary-A" data-summary="A">组件A：<span class="builder__summary-value">未选择</span></li>
|
||||
<li id="summary-B" data-summary="B">组件B：<span class="builder__summary-value">未选择</span></li>
|
||||
<li id="summary-C" data-summary="C">组件C：<span class="builder__summary-value">未选择</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="builder__actions">
|
||||
<button type="button" class="builder__add-to-cart">加入购物车</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- page-builder.php 已加载 -->
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
/**
|
||||
* The template for displaying pages
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="main" class="site-main">
|
||||
<?php
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
?>
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title"><?php the_title(); ?></h1>
|
||||
</header>
|
||||
|
||||
<div class="entry-content">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
</main>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
/**
|
||||
* The sidebar template file
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
<aside id="secondary" class="widget-area">
|
||||
<?php dynamic_sidebar( 'sidebar-1' ); ?>
|
||||
</aside>
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<?php
|
||||
/**
|
||||
* The template for displaying single posts
|
||||
*
|
||||
* @package SewJoy_Theme
|
||||
*/
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="main" class="site-main">
|
||||
<?php
|
||||
while ( have_posts() ) :
|
||||
the_post();
|
||||
?>
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title"><?php the_title(); ?></h1>
|
||||
|
||||
<div class="entry-meta">
|
||||
<span class="posted-on">
|
||||
<time class="entry-date published" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">
|
||||
<?php echo esc_html( get_the_date() ); ?>
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="entry-content">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
</main>
|
||||
|
||||
<?php
|
||||
get_footer();
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
Theme Name: SEWJOY THEME
|
||||
Theme URI: https://example.com/sewjoy-theme
|
||||
Author: SewJoy
|
||||
Author URI: https://example.com
|
||||
Description: A WordPress theme for SEWJOY - bringing joy to sewing enthusiasts with a clean, modern design.
|
||||
Version: 1.0.0
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: sewjoy-theme
|
||||
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
|
||||
*/
|
||||
|
||||
/* This file is required by WordPress to identify the theme.
|
||||
All theme styles will be added below. */
|
||||
Reference in New Issue
Block a user