wordpress/techblog-wp-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: TechBlog Pro WordPress theme

Browse Source 
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
2026-08-18 16:05:14 +08:00
commit 6d4368fbd1
17 changed files with 4103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/admin-options.php
+424
View File
@@ -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');