WordPress REST API ile Dinamik Tek Sayfa Uygulaması Nasıl Oluşturulur?
WordPress’in gücü yalnızca içerik yönetiminde değil, aynı zamanda bir API sunucusu olarak da yatar. Bu makalede, **WordPress REST API**’yi kullanarak Vue.js ile 100% dinamik ve tek sayfalı bir uygulama geliştirme adımlarını ele alacağız. Hedefimiz, arka plan PHP kodunu en aza indirerek, tamamen ön uçta çalışan modern bir deneyim sunmak.
Neden Tek Sayfa Uygulaması?
* Özelleştirilebilir müşteri deneyimi
* Düşük API çağrıları ile hızlı yanıt süreleri
* Parlak ve tutarlı UI
Gereksinimler
- WordPress kurulu bir barındırıma
- `wp_rest` yetkisi için geliştirme ortamı
- Composer ile WordPress CLI (yönetici haklarıyla)
- Vue.js (v3) proje
- REST API üzerinden veriye erişim için erişim anahtarı
1. Adım: API’yi Hazırlamak
```php
// functions.php
add_action( 'rest_api_init', function () {
register_rest_route( 'myapp/v1', '/posts', array(
'methods' => 'GET',
'callback' => 'myapp_get_posts',
'permission_callback' => '__return_true', // Geliştirme için open
) );
});
function myapp_get_posts( $request ) {
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'post_status' => 'publish',
);
$posts = wp_get_recent_posts( $args );
return rest_ensure_response( $posts );
}
```
Bu kod, `wp-json/myapp/v1/posts` endpoint’ine tüm yayınlanmış yazıları döndürecek.
2. Adım: Vue.js Projesini Başlatmak
```bash
npm init vue@latest my-ssg-app
cd my-ssg-app
npm install axios
```
3. Adım: API’yi Tüketmek
Projemizin `src/components/Posts.vue` bileşeninde API çağrısını gerçekleştirelim:
```vue
<template>
<div>
<h1>En Son Yazılar</h1>
<ul>
<li v-for="post in posts" :key="post.ID">
<a :href="`https://yourwordpresssite.com/?p=${post.ID}`">
{{ post.post_title }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const posts = ref([]);
onMounted(async () => {
const response = await axios.get('https://yourwordpresssite.com/wp-json/myapp/v1/posts');
posts.value = response.data;
});
</script>
```
4. Adım: Sunucu Tarafı Rendering (SSR)
VueKit kaleme alarak **ssr** kurulu, aynı verileri önceden yükleyerek SEO dostu bir sayfa oluşturabilirsiniz.
```bash
npm i vue-ssr
```
VueKit belgesi üzerinden tek sayfa ile **SSRed** içerik hazırlanır.
5. Adım: WordPress’e Vue.js Entegratı
* **Element Atama:** WP temanızın `header.php` dosyasına `<div id="app"></div>` yerleştirerek Vue uygulamasını bağlayın.
* **Script Ekleme:** `footer.php`’de build dosyanızı çağırın.
Bu sayede her sayfada tek bir üzerinden çalışan Vue.js uygulaması barındırılarak, backend olarak WordPress kalır.
Sonuç
Artık **WordPress** sadece içerik sunan bir CMS değil, aynı zamanda güçlü bir **REST API** sağlayıcısı ve büyüyen tek sayfa uygulamalarınız için bir arka plan hizmeti haline geldi. Bu yaklaşımla, dinamik front-end ile birlikte devasa bir performans ve geliştirici deneyimi elde edebilirsiniz.
Eğer siz de kendi tek sayfa uygulamanızı geliştirmek istiyorsanız, bu adımları sırasıyla uygulayarak WordPress’in API yeteneklerinin kapladığı yeni alanlara geçiş yapabilirsiniz.
* Özelleştirilebilir müşteri deneyimi
* Düşük API çağrıları ile hızlı yanıt süreleri
* Parlak ve tutarlı UI
Gereksinimler
- WordPress kurulu bir barındırıma
- `wp_rest` yetkisi için geliştirme ortamı
- Composer ile WordPress CLI (yönetici haklarıyla)
- Vue.js (v3) proje
- REST API üzerinden veriye erişim için erişim anahtarı
1. Adım: API’yi Hazırlamak
```php
// functions.php
add_action( 'rest_api_init', function () {
register_rest_route( 'myapp/v1', '/posts', array(
'methods' => 'GET',
'callback' => 'myapp_get_posts',
'permission_callback' => '__return_true', // Geliştirme için open
) );
});
function myapp_get_posts( $request ) {
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'post_status' => 'publish',
);
$posts = wp_get_recent_posts( $args );
return rest_ensure_response( $posts );
}
```
Bu kod, `wp-json/myapp/v1/posts` endpoint’ine tüm yayınlanmış yazıları döndürecek.
2. Adım: Vue.js Projesini Başlatmak
```bash
npm init vue@latest my-ssg-app
cd my-ssg-app
npm install axios
```
3. Adım: API’yi Tüketmek
Projemizin `src/components/Posts.vue` bileşeninde API çağrısını gerçekleştirelim:
```vue
<template>
<div>
<h1>En Son Yazılar</h1>
<ul>
<li v-for="post in posts" :key="post.ID">
<a :href="`https://yourwordpresssite.com/?p=${post.ID}`">
{{ post.post_title }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const posts = ref([]);
onMounted(async () => {
const response = await axios.get('https://yourwordpresssite.com/wp-json/myapp/v1/posts');
posts.value = response.data;
});
</script>
```
4. Adım: Sunucu Tarafı Rendering (SSR)
VueKit kaleme alarak **ssr** kurulu, aynı verileri önceden yükleyerek SEO dostu bir sayfa oluşturabilirsiniz.
```bash
npm i vue-ssr
```
VueKit belgesi üzerinden tek sayfa ile **SSRed** içerik hazırlanır.
5. Adım: WordPress’e Vue.js Entegratı
* **Element Atama:** WP temanızın `header.php` dosyasına `<div id="app"></div>` yerleştirerek Vue uygulamasını bağlayın.
* **Script Ekleme:** `footer.php`’de build dosyanızı çağırın.
Bu sayede her sayfada tek bir üzerinden çalışan Vue.js uygulaması barındırılarak, backend olarak WordPress kalır.
Sonuç
Artık **WordPress** sadece içerik sunan bir CMS değil, aynı zamanda güçlü bir **REST API** sağlayıcısı ve büyüyen tek sayfa uygulamalarınız için bir arka plan hizmeti haline geldi. Bu yaklaşımla, dinamik front-end ile birlikte devasa bir performans ve geliştirici deneyimi elde edebilirsiniz.
Eğer siz de kendi tek sayfa uygulamanızı geliştirmek istiyorsanız, bu adımları sırasıyla uygulayarak WordPress’in API yeteneklerinin kapladığı yeni alanlara geçiş yapabilirsiniz.
```php
// functions.php
add_action( 'rest_api_init', function () {
register_rest_route( 'myapp/v1', '/posts', array(
'methods' => 'GET',
'callback' => 'myapp_get_posts',
'permission_callback' => '__return_true', // Geliştirme için open
) );
});
function myapp_get_posts( $request ) {
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'post_status' => 'publish',
);
$posts = wp_get_recent_posts( $args );
return rest_ensure_response( $posts );
}
```
Bu kod, `wp-json/myapp/v1/posts` endpoint’ine tüm yayınlanmış yazıları döndürecek.
2. Adım: Vue.js Projesini Başlatmak
```bash
npm init vue@latest my-ssg-app
cd my-ssg-app
npm install axios
```
3. Adım: API’yi Tüketmek
Projemizin `src/components/Posts.vue` bileşeninde API çağrısını gerçekleştirelim:
```vue
<template>
<div>
<h1>En Son Yazılar</h1>
<ul>
<li v-for="post in posts" :key="post.ID">
<a :href="`https://yourwordpresssite.com/?p=${post.ID}`">
{{ post.post_title }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const posts = ref([]);
onMounted(async () => {
const response = await axios.get('https://yourwordpresssite.com/wp-json/myapp/v1/posts');
posts.value = response.data;
});
</script>
```
4. Adım: Sunucu Tarafı Rendering (SSR)
VueKit kaleme alarak **ssr** kurulu, aynı verileri önceden yükleyerek SEO dostu bir sayfa oluşturabilirsiniz.
```bash
npm i vue-ssr
```
VueKit belgesi üzerinden tek sayfa ile **SSRed** içerik hazırlanır.
5. Adım: WordPress’e Vue.js Entegratı
* **Element Atama:** WP temanızın `header.php` dosyasına `<div id="app"></div>` yerleştirerek Vue uygulamasını bağlayın.
* **Script Ekleme:** `footer.php`’de build dosyanızı çağırın.
Bu sayede her sayfada tek bir üzerinden çalışan Vue.js uygulaması barındırılarak, backend olarak WordPress kalır.
Sonuç
Artık **WordPress** sadece içerik sunan bir CMS değil, aynı zamanda güçlü bir **REST API** sağlayıcısı ve büyüyen tek sayfa uygulamalarınız için bir arka plan hizmeti haline geldi. Bu yaklaşımla, dinamik front-end ile birlikte devasa bir performans ve geliştirici deneyimi elde edebilirsiniz.
Eğer siz de kendi tek sayfa uygulamanızı geliştirmek istiyorsanız, bu adımları sırasıyla uygulayarak WordPress’in API yeteneklerinin kapladığı yeni alanlara geçiş yapabilirsiniz.
Projemizin `src/components/Posts.vue` bileşeninde API çağrısını gerçekleştirelim:
```vue
<template>
<div>
<h1>En Son Yazılar</h1>
<ul>
<li v-for="post in posts" :key="post.ID">
<a :href="`https://yourwordpresssite.com/?p=${post.ID}`">
{{ post.post_title }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const posts = ref([]);
onMounted(async () => {
const response = await axios.get('https://yourwordpresssite.com/wp-json/myapp/v1/posts');
posts.value = response.data;
});
</script>
```
4. Adım: Sunucu Tarafı Rendering (SSR)
VueKit kaleme alarak **ssr** kurulu, aynı verileri önceden yükleyerek SEO dostu bir sayfa oluşturabilirsiniz.
```bash
npm i vue-ssr
```
VueKit belgesi üzerinden tek sayfa ile **SSRed** içerik hazırlanır.
5. Adım: WordPress’e Vue.js Entegratı
* **Element Atama:** WP temanızın `header.php` dosyasına `<div id="app"></div>` yerleştirerek Vue uygulamasını bağlayın.
* **Script Ekleme:** `footer.php`’de build dosyanızı çağırın.
Bu sayede her sayfada tek bir üzerinden çalışan Vue.js uygulaması barındırılarak, backend olarak WordPress kalır.
Sonuç
Artık **WordPress** sadece içerik sunan bir CMS değil, aynı zamanda güçlü bir **REST API** sağlayıcısı ve büyüyen tek sayfa uygulamalarınız için bir arka plan hizmeti haline geldi. Bu yaklaşımla, dinamik front-end ile birlikte devasa bir performans ve geliştirici deneyimi elde edebilirsiniz.
Eğer siz de kendi tek sayfa uygulamanızı geliştirmek istiyorsanız, bu adımları sırasıyla uygulayarak WordPress’in API yeteneklerinin kapladığı yeni alanlara geçiş yapabilirsiniz.
* **Element Atama:** WP temanızın `header.php` dosyasına `<div id="app"></div>` yerleştirerek Vue uygulamasını bağlayın.
* **Script Ekleme:** `footer.php`’de build dosyanızı çağırın.
Bu sayede her sayfada tek bir üzerinden çalışan Vue.js uygulaması barındırılarak, backend olarak WordPress kalır.
Sonuç
Artık **WordPress** sadece içerik sunan bir CMS değil, aynı zamanda güçlü bir **REST API** sağlayıcısı ve büyüyen tek sayfa uygulamalarınız için bir arka plan hizmeti haline geldi. Bu yaklaşımla, dinamik front-end ile birlikte devasa bir performans ve geliştirici deneyimi elde edebilirsiniz.
Eğer siz de kendi tek sayfa uygulamanızı geliştirmek istiyorsanız, bu adımları sırasıyla uygulayarak WordPress’in API yeteneklerinin kapladığı yeni alanlara geçiş yapabilirsiniz.
