Initial commit: TechBlog Pro WordPress theme
Features: - Modern UI with dark mode support - Code highlighting with copy button - Auto table of contents - Reading time & views counter - Responsive design - Admin settings page - AJAX search
This commit is contained in:
Your Name
@@ -0,0 +1,424 @@
|
||||
<?php
|
||||
/**
|
||||
* Theme Options Page
|
||||
*
|
||||
* @package TechBlog Pro
|
||||
*/
|
||||
|
||||
// Add theme options page
|
||||
function techblog_add_admin_menu() {
|
||||
add_theme_page(
|
||||
'TechBlog Pro 设置',
|
||||
'主题设置',
|
||||
'manage_options',
|
||||
'techblog-settings',
|
||||
'techblog_options_page_html'
|
||||
);
|
||||
}
|
||||
add_action('admin_menu', 'techblog_add_admin_menu');
|
||||
|
||||
// Register settings
|
||||
function techblog_register_settings() {
|
||||
// General Settings
|
||||
register_setting('techblog_options', 'techblog_hero_title');
|
||||
register_setting('techblog_options', 'techblog_hero_desc');
|
||||
register_setting('techblog_options', 'techblog_footer_text');
|
||||
|
||||
// Social Links
|
||||
register_setting('techblog_options', 'techblog_social_github');
|
||||
register_setting('techblog_options', 'techblog_social_twitter');
|
||||
register_setting('techblog_options', 'techblog_social_gitee');
|
||||
register_setting('techblog_options', 'techblog_social_email');
|
||||
register_setting('techblog_options', 'techblog_social_wechat');
|
||||
|
||||
// Appearance
|
||||
register_setting('techblog_options', 'techblog_primary_color', array(
|
||||
'default' => '#2563eb'
|
||||
));
|
||||
register_setting('techblog_options', 'techblog_code_theme', array(
|
||||
'default' => 'dark'
|
||||
));
|
||||
register_setting('techblog_options', 'techblog_show_toc', array(
|
||||
'default' => '1'
|
||||
));
|
||||
register_setting('techblog_options', 'techblog_show_reading_time', array(
|
||||
'default' => '1'
|
||||
));
|
||||
register_setting('techblog_options', 'techblog_show_views', array(
|
||||
'default' => '1'
|
||||
));
|
||||
register_setting('techblog_options', 'techblog_enable_dark_mode', array(
|
||||
'default' => '1'
|
||||
));
|
||||
}
|
||||
add_action('admin_init', 'techblog_register_settings');
|
||||
|
||||
// Admin page HTML
|
||||
function techblog_options_page_html() {
|
||||
if (!current_user_can('manage_options')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isset($_GET['settings-updated'])) {
|
||||
add_settings_error('techblog_messages', 'techblog_message', '设置已保存', 'updated');
|
||||
}
|
||||
|
||||
settings_errors('techblog_messages');
|
||||
?>
|
||||
<div class="wrap">
|
||||
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
|
||||
|
||||
<div class="techblog-admin-wrapper">
|
||||
<!-- Tabs -->
|
||||
<nav class="nav-tab-wrapper">
|
||||
<a href="#general" class="nav-tab nav-tab-active" data-tab="general">常规设置</a>
|
||||
<a href="#social" class="nav-tab" data-tab="social">社交媒体</a>
|
||||
<a href="#appearance" class="nav-tab" data-tab="appearance">外观设置</a>
|
||||
<a href="#about" class="nav-tab" data-tab="about">关于主题</a>
|
||||
</nav>
|
||||
|
||||
<form method="post" action="options.php" class="techblog-settings-form">
|
||||
<?php settings_fields('techblog_options'); ?>
|
||||
|
||||
<!-- General Settings Tab -->
|
||||
<div id="tab-general" class="tab-content active">
|
||||
<table class="form-table">
|
||||
<tr>
|
||||
<th scope="row">首页横幅标题</th>
|
||||
<td>
|
||||
<input type="text" name="techblog_hero_title"
|
||||
value="<?php echo esc_attr(get_option('techblog_hero_title', '探索技术世界')); ?>"
|
||||
class="regular-text" />
|
||||
<p class="description">首页顶部横幅的标题文字</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">首页横幅描述</th>
|
||||
<td>
|
||||
<textarea name="techblog_hero_desc" rows="3" class="large-text"><?php echo esc_textarea(get_option('techblog_hero_desc', '分享最新的IT技术、编程教程、系统运维经验')); ?></textarea>
|
||||
<p class="description">首页顶部横幅的描述文字</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">页脚文字</th>
|
||||
<td>
|
||||
<input type="text" name="techblog_footer_text"
|
||||
value="<?php echo esc_attr(get_option('techblog_footer_text', '专注于IT技术分享')); ?>"
|
||||
class="regular-text" />
|
||||
<p class="description">页脚显示的描述文字</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Social Links Tab -->
|
||||
<div id="tab-social" class="tab-content">
|
||||
<table class="form-table">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<label>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="vertical-align: middle; margin-right: 8px;">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</label>
|
||||
</th>
|
||||
<td>
|
||||
<input type="url" name="techblog_social_github"
|
||||
value="<?php echo esc_attr(get_option('techblog_social_github')); ?>"
|
||||
class="regular-text" placeholder="https://github.com/yourusername" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<label>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="vertical-align: middle; margin-right: 8px;">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
Twitter / X
|
||||
</label>
|
||||
</th>
|
||||
<td>
|
||||
<input type="url" name="techblog_social_twitter"
|
||||
value="<?php echo esc_attr(get_option('techblog_social_twitter')); ?>"
|
||||
class="regular-text" placeholder="https://twitter.com/yourusername" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<label>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="vertical-align: middle; margin-right: 8px;">
|
||||
<path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.593.593v1.633h1.633a.593.593 0 0 1 0 1.186h-1.633v1.633a.593.593 0 0 1-1.186 0V10.35h-1.633a.593.593 0 0 1 0-1.186h1.633V7.533c0-.327.266-.593.593-.593zM12 3.6a8.4 8.4 0 1 0 0 16.8 8.4 8.4 0 0 0 0-16.8z"/>
|
||||
</svg>
|
||||
Gitee
|
||||
</label>
|
||||
</th>
|
||||
<td>
|
||||
<input type="url" name="techblog_social_gitee"
|
||||
value="<?php echo esc_attr(get_option('techblog_social_gitee')); ?>"
|
||||
class="regular-text" placeholder="https://gitee.com/yourusername" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<label>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
邮箱
|
||||
</label>
|
||||
</th>
|
||||
<td>
|
||||
<input type="email" name="techblog_social_email"
|
||||
value="<?php echo esc_attr(get_option('techblog_social_email')); ?>"
|
||||
class="regular-text" placeholder="your@email.com" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<label>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="vertical-align: middle; margin-right: 8px;">
|
||||
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.032zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982z"/>
|
||||
</svg>
|
||||
微信号
|
||||
</label>
|
||||
</th>
|
||||
<td>
|
||||
<input type="text" name="techblog_social_wechat"
|
||||
value="<?php echo esc_attr(get_option('techblog_social_wechat')); ?>"
|
||||
class="regular-text" placeholder="your-wechat-id" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Appearance Tab -->
|
||||
<div id="tab-appearance" class="tab-content">
|
||||
<table class="form-table">
|
||||
<tr>
|
||||
<th scope="row">主题色</th>
|
||||
<td>
|
||||
<input type="color" name="techblog_primary_color"
|
||||
value="<?php echo esc_attr(get_option('techblog_primary_color', '#2563eb')); ?>" />
|
||||
<p class="description">选择主题的主色调</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">代码块主题</th>
|
||||
<td>
|
||||
<select name="techblog_code_theme">
|
||||
<option value="dark" <?php selected(get_option('techblog_code_theme', 'dark'), 'dark'); ?>>深色</option>
|
||||
<option value="light" <?php selected(get_option('techblog_code_theme', 'dark'), 'light'); ?>>浅色</option>
|
||||
</select>
|
||||
<p class="description">代码块的配色方案</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">功能开关</th>
|
||||
<td>
|
||||
<fieldset>
|
||||
<label>
|
||||
<input type="checkbox" name="techblog_show_toc" value="1"
|
||||
<?php checked(get_option('techblog_show_toc', '1'), '1'); ?> />
|
||||
显示文章目录
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="techblog_show_reading_time" value="1"
|
||||
<?php checked(get_option('techblog_show_reading_time', '1'), '1'); ?> />
|
||||
显示阅读时间
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="techblog_show_views" value="1"
|
||||
<?php checked(get_option('techblog_show_views', '1'), '1'); ?> />
|
||||
显示阅读次数
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="techblog_enable_dark_mode" value="1"
|
||||
<?php checked(get_option('techblog_enable_dark_mode', '1'), '1'); ?> />
|
||||
启用暗色模式切换
|
||||
</label>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- About Tab -->
|
||||
<div id="tab-about" class="tab-content">
|
||||
<div class="techblog-about-card">
|
||||
<div class="techblog-about-header">
|
||||
<h2>TechBlog Pro</h2>
|
||||
<span class="version">v1.0.0</span>
|
||||
</div>
|
||||
<p>一个专为IT技术分享设计的现代化WordPress主题。</p>
|
||||
|
||||
<h3>✨ 主题特性</h3>
|
||||
<ul>
|
||||
<li>🎨 现代化UI设计，支持暗色模式</li>
|
||||
<li>📝 代码高亮 + 一键复制</li>
|
||||
<li>📑 自动生成文章目录</li>
|
||||
<li>⏱️ 阅读时间估算</li>
|
||||
<li>📊 阅读次数统计</li>
|
||||
<li>🔍 AJAX实时搜索</li>
|
||||
<li>📱 完美响应式布局</li>
|
||||
<li>⚡ 性能优化（懒加载、平滑滚动）</li>
|
||||
</ul>
|
||||
|
||||
<h3>🔗 相关链接</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/techblog-pro" target="_blank">GitHub 仓库</a></li>
|
||||
<li><a href="https://github.com/techblog-pro/issues" target="_blank">问题反馈</a></li>
|
||||
<li><a href="https://github.com/techblog-pro/wiki" target="_blank">使用文档</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php submit_button('保存设置'); ?>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.techblog-admin-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.nav-tab-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid #ccd0d4;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-tab-wrapper .nav-tab {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccd0d4;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-tab-wrapper .nav-tab:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-tab-wrapper .nav-tab:hover {
|
||||
background: #f0f0f1;
|
||||
}
|
||||
|
||||
.nav-tab-wrapper .nav-tab.nav-tab-active {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccd0d4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.techblog-about-card {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.techblog-about-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.techblog-about-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.techblog-about-header .version {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.techblog-about-card h3 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.techblog-about-card ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.techblog-about-card li {
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.techblog-about-card a {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
@media (max-width: 782px) {
|
||||
.techblog-admin-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nav-tab-wrapper {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-tab-wrapper .nav-tab {
|
||||
border-bottom: none;
|
||||
border-right: 1px solid #ccd0d4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
// Tab switching
|
||||
$('.nav-tab-wrapper .nav-tab').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var tab = $(this).data('tab');
|
||||
|
||||
// Update active tab
|
||||
$('.nav-tab-wrapper .nav-tab').removeClass('nav-tab-active');
|
||||
$(this).addClass('nav-tab-active');
|
||||
|
||||
// Show tab content
|
||||
$('.tab-content').removeClass('active');
|
||||
$('#tab-' + tab).addClass('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
// Add admin styles
|
||||
function techblog_admin_styles($hook) {
|
||||
if ('appearance_page_techblog-settings' !== $hook) {
|
||||
return;
|
||||
}
|
||||
wp_enqueue_style('techblog-admin', TECHBLOG_URI . '/css/admin.css', array(), TECHBLOG_VERSION);
|
||||
}
|
||||
add_action('admin_enqueue_scripts', 'techblog_admin_styles');
|
||||
Reference in New Issue
Block a user