當今 AI 當道，不管你是不是程式設計師還是一般的 wordpress 的使用者都可利用 ChatGPT 來開發你想要的功能。當然 ChatGPT 所產生的程式不一定可完美的執行，但以我個人的觀點來看至少光是程式的骨架寫好就已經省下不少的時間，剩下的可由自已補。但如果程式能完美的執行那更好，直接省下不少時間。
發想需求
在初始的階段就要想出你想要 ChatGPT 產生的功能。通常精準愈好。如果在提示詞寫的不是很清楚時 ChatGPT 可能就會依 ChatGPT 自已的想法寫出該功能，結果就是 ChatGPT 的產出可能就不是你所想要的程式。一但是這樣你就得必需再用另一提示詞進行修改。來來回回直到功能完整為止。
範例提示詞
請為 WordPress 子主題的 functions.php 設計一段 PHP 程式碼，功能如下：
1：以短代碼 [ocam_related_post] 呼叫，並可傳入以下參數：
posts：回傳的文章數量
order：排序方式，date 或 rand
type：依據分類或標籤抓文，值為 category 或 tag
value：對應的分類名稱或標籤名稱
2：回傳的 HTML 格式為可滑動的卡片式文章區塊，包含：
每篇文章有縮圖（若無則顯示預設圖）
顯示文章標題（不含 excerpt）
點擊卡片可前往文章
滑鼠 hover 有動畫效果
3：UI 支援以下功能：
左右滑動箭頭控制
自動輪播（5 秒切換）
手指觸控滑動（手機、平板）
響應式手機排版（卡片寬度自動調整）
4：程式碼應包含完整的 HTML、CSS 與 JavaScript，並全部內嵌於短代碼中，方便放入 functions.php。
ChatGPT 產出
function ocam_related_post_shortcode($atts) {
$atts = shortcode_atts(array(
'posts' => 5,
'order' => 'date',
'type' => 'category', // or 'tag'
'value' => '',
), $atts, 'ocam_related_post');
$args = array(
'posts_per_page' => intval($atts['posts']),
'orderby' => ($atts['order'] === 'rand') ? 'rand' : 'date',
'post_status' => 'publish',
);
if ($atts['type'] === 'category') {
$args['category_name'] = sanitize_text_field($atts['value']);
} elseif ($atts['type'] === 'tag') {
$args['tag'] = sanitize_text_field($atts['value']);
}
$query = new WP_Query($args);
if (!$query->have_posts()) {
return '<p>無相關文章。</p>';
}
ob_start(); ?>
<style>
.ocam-slider-wrapper {
position: relative;
margin-bottom: 20px;
}
.ocam-slider-container {
display: flex;
overflow-x: auto;
gap: 16px;
scroll-snap-type: x mandatory;
padding: 10px 0;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.ocam-slider-item {
flex: 0 0 auto;
width: 250px;
scroll-snap-align: start;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
text-decoration: none;
color: inherit;
}
.ocam-slider-item:hover {
transform: translateY(-5px);
}
.ocam-thumbnail {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px 10px 0 0;
}
.ocam-content {
padding: 12px;
}
.ocam-title {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.ocam-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.3);
color: white;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 1;
}
.ocam-arrow:hover {
background: rgba(0, 0, 0, 0.6);
}
.ocam-arrow-left {
left: -10px;
}
.ocam-arrow-right {
right: -10px;
}
@media (max-width: 768px) {
.ocam-slider-item {
width: 200px;
}
}
@media (max-width: 480px) {
.ocam-slider-item {
width: 160px;
}
.ocam-title {
font-size: 14px;
}
}
</style>
<div class="ocam-slider-wrapper" onmouseover="ocamPause()" onmouseout="ocamResume()">
<button class="ocam-arrow ocam-arrow-left" onclick="ocamScroll(-1)">◀</button>
<div class="ocam-slider-container" id="ocam-slider" ontouchstart="ocamTouchStart(event)" ontouchmove="ocamTouchMove(event)">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<a class="ocam-slider-item" href="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium', ['class' => 'ocam-thumbnail']); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/default-thumbnail.jpg" class="ocam-thumbnail" alt="No Image">
<?php endif; ?>
<div class="ocam-content">
<div class="ocam-title"><?php the_title(); ?></div>
</div>
</a>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<button class="ocam-arrow ocam-arrow-right" onclick="ocamScroll(1)">▶</button>
</div>
<script>
let ocamSlider = document.getElementById('ocam-slider');
let ocamInterval;
let startX = 0;
function ocamScroll(direction) {
const itemWidth = ocamSlider.querySelector('.ocam-slider-item').offsetWidth + 16;
ocamSlider.scrollLeft += direction * itemWidth;
}
function ocamAutoSlide() {
ocamScroll(1);
}
function ocamPause() {
clearInterval(ocamInterval);
}
function ocamResume() {
ocamInterval = setInterval(ocamAutoSlide, 5000);
}
function ocamTouchStart(e) {
startX = e.touches[0].clientX;
}
function ocamTouchMove(e) {
let deltaX = e.touches[0].clientX - startX;
if (Math.abs(deltaX) > 50) {
ocamScroll(deltaX < 0 ? 1 : -1);
startX = e.touches[0].clientX;
}
}
document.addEventListener('DOMContentLoaded', () => {
ocamResume();
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('ocam_related_post', 'ocam_related_post_shortcode');
使用方式
[ocam_related_post posts=6 order="rand" type="tag" value="wordpress"]畫面結果
個人從發想產出到測試應該小於 30 分鐘。這比傳統的 google 搜尋或自已全部手寫至少快了 10 倍以上。今日 AI 也許對就業市場上產生不良的影響，但工作於資訊產業的人本來就要隨著時間推移而學習新的東西。多多少少熟用 AI 工具會對工作大有幫助。現在就開始用 chatgpt 吧
