nexgen-tech-wp-theme — WordPress 作品集模板

SHA-256: e92f025c002df5de88e65262a1228017ece7315bac5d26fe7e3f2c3c639158a4

2026-10-13T11:32:17.356Z

# NEXGEN Tech — WordPress Theme

A dark, modern tech agency WordPress theme built with **Tailwind CSS** (CDN), **GSAP animations**, and a fully custom WordPress feature set. Designed for software agencies, digital studios, and tech startups.

![Theme Screenshot](screenshot.png)

---

## ✨ Features

- **Animated Hero** — GSAP-powered entrance animations with scroll indicator
- **Stats Strip** — 4 configurable key metrics
- **Services Section** — 6-card grid with hover effects
- **Portfolio CPT** — Custom post type with category filtering, client meta, tech stack tags, and live URL
- **Team Members CPT** — With role, LinkedIn, and display order
- **Dynamic Navigation** — Mobile hamburger menu with fullscreen drawer
- **Contact Footer** — Contact form (CF7 compatible), social links, and widget area
- **Blog Support** — `single.php`, `archive.php`, `search.php`, `comments.php`
- **Theme Customizer** — Edit contact info, social links, brand colors, stats & hero copy from WP Admin
- **i18n Ready** — Translation-ready with text domain `nexgen-tech`
- **Favicon Support** — Drop `favicon.png` in theme root

---

## 🛠 Tech Stack

| Layer | Technology |
|-------|-----------|
| CSS Framework | [Tailwind CSS](https://tailwindcss.com/) via CDN |
| Animations | [GSAP](https://gsap.com/) + ScrollTrigger |
| Typography | [Inter](https://fonts.google.com/specimen/Inter) (Google Fonts) |
| CMS | WordPress 6.x |
| PHP | 8.0+ |

---

## 📁 Theme Structure

```
nexgen-tech/
├── style.css                     # Theme header + base styles
├── functions.php                 # Enqueues, theme setup, CPT includes
├── header.php                    # Navigation (dynamic WP menu + fallback)
├── footer.php                    # Contact section + footer
├── index.php                     # Homepage (hero, about, services, portfolio)
├── page.php                      # Static pages
├── single.php                    # Single blog post
├── archive.php                   # Category / tag / CPT archives
├── search.php                    # Search results
├── comments.php                  # Comment thread + form
├── 404.php                       # Custom 404 page
├── screenshot.png                # WP Admin theme preview (1200×900)
├── favicon.png                   # ← Add your own here
│
├── inc/
│   ├── custom-post-types.php     # Portfolio + Team Member CPTs & meta boxes
│   └── customizer.php            # Theme Customizer settings & helper functions
│
├── template-parts/
│   └── portfolio-section.php     # Portfolio grid (auto-hides if no posts)
│
└── languages/                    # Translation files (.po / .mo)
```

---

## 🚀 Installation

### Option A — Upload via WP Admin
1. Zip the `nexgen-tech/` folder
2. Go to **WP Admin → Appearance → Themes → Add New → Upload Theme**
3. Upload the zip and click **Activate**

### Option B — FTP / cPanel
1. Upload the `nexgen-tech/` folder to `/wp-content/themes/`
2. Go to **WP Admin → Appearance → Themes** and activate

---

## ⚙️ Setup Checklist

After activating the theme:

- [ ] **Menus** → WP Admin → Appearance → Menus → Assign to _Primary Navigation_ and _Footer Navigation_
- [ ] **Contact Info** → WP Admin → Appearance → Customize → Contact Information
- [ ] **Social Links** → WP Admin → Appearance → Customize → Social Media Links
- [ ] **Homepage Stats** → WP Admin → Appearance → Customize → Homepage Stats
- [ ] **Portfolio** → Add posts at WP Admin → Portfolio → Add New
- [ ] **Team Members** → Add at WP Admin → Team → Add New
- [ ] **Contact Form** → Install [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) and replace `YOUR_FORM_ID` in `footer.php`
- [ ] **Favicon** → Drop `favicon.png` (32×32 or 64×64) into the theme root folder
- [ ] **Flush Permalinks** → WP Admin → Settings → Permalinks → Save (activates CPT URLs)

---

## 🎨 Customization

### Colors (Customizer)
Go to **WP Admin → Appearance → Customize → Brand Colors** to change the accent and secondary colors live.

Or override in `style.css`:
```css
:root {
  --nexgen-accent: #22d3ee;     /* cyan-400 */
  --nexgen-secondary: #3b82f6; /* blue-500 */
}
```

### Portfolio Meta Fields
Each portfolio project supports:
- **Client Name**
- **Live URL** (opens in new tab)
- **Year**
- **Tech Stack** (comma-separated, e.g. `React, Node.js, AWS`)
- **Project Category** (taxonomy, used for filter tabs)

### Adding Team Members
Each team member supports:
- **Photo** (Featured Image)
- **Bio** (Post content)
- **Role / Title**
- **LinkedIn URL**
- **Email**
- **Display Order** (lower = appears first)

---

## 🔌 Plugin Recommendations

| Plugin | Purpose |
|--------|---------|
| [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) | Contact form in footer |
| [Yoast SEO](https://wordpress.org/plugins/wordpress-seo/) | SEO optimization |
| [Smush](https://wordpress.org/plugins/wp-smushit/) | Image optimization |
| [WP Rocket](https://wp-rocket.me/) | Caching & performance |

---

## 📄 License

MIT License — free to use, modify, and distribute.

---

## 👥 Credits

Built for **NEXGEN Tech** — a software agency specializing in web, mobile, and AI solutions.