This commit is contained in:
2026-06-22 00:43:05 +08:00
parent d074a80cac
commit acae35700e
15 changed files with 31931 additions and 0 deletions
+25
View File
@@ -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
View File
@@ -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();
+409
View File
@@ -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;
}
}
+57
View File
@@ -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);
+28
View File
@@ -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
View File
@@ -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>&copy; <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></p>
</div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
+77
View File
@@ -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
View File
@@ -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">
+32
View File
@@ -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();
+70
View File
@@ -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();
+29
View File
@@ -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
View File
@@ -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
View File
@@ -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();
+15
View File
@@ -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. */