WordPress CMS Destekli Ön Uç Uygulaması veya Projesi Oluşturma
Yayınlanan: 2021-08-17
WordPress destekli bir ön uç uygulaması oluşturmak, WP REST API ve AngularJS bilgisi gerektirir. Arka uç olarak WordPress ile herhangi bir uygulama oluşturabilirsiniz. WordPress'te popüler olan geleneksel tema ve yönetici modelinden kurtulabilirsiniz.
WordPress destekli bir kullanıcı arabirimi oluşturmaya ilişkin bu makalede, öne çıkan gönderiler, kategoriler ve kullanıcı listeleme sayfaları içeren bir arayüz oluşturacağız.
WordPress destekli bir ön uç uygulaması oluşturmak için tel kafeslerin yardımına ihtiyacınız olacak.
Projeye Genel Bakış
Gereksinimi anlamanın ve tüm projeyi planlamanın zamanı geldi. İhtiyacımız olan ilk şey, gönderiler, kullanıcılar ve kategoriler için sayfaları ve tekli sayfaları listelemek.
Bu nedenle, bu sayfalar için şablonlara ihtiyacımız olacak. Listeleme sayfası, sayfalandırmaya sahip belirli sayıda gönderiyi gösterecektir. Aşağıdaki, bir listeleme sayfasının kabaca nasıl görünmesi gerektiğidir.
Aşağıdaki, tek bir gönderi şablonunun nasıl görünmesi gerektiğidir.
Tel kafeste sahip olduğumuz özelliklerin çoğu WP REST API ile kullanılabilir, ancak öne çıkan resim bağlantısı, kategori adları ve yazar adları gibi kendimize eklememiz gereken bazı ek özellikler var.
Bir adım daha ileri gidelim ve kategorilerin ve gönderilerin tel kafeslerin nasıl görünmesi gerektiğini analiz edelim. Kategori şablonu böyle görünmelidir.
Kullanıcı şablonu böyle görünmelidir.
Bu özelliklerden bazılarına sahip olmak için bir tamamlayıcı eklentiye ihtiyacınız olacaktır. Ayrıca, bu şablonların hepsinde bazı özelliklerin ortak olduğunu ve dolayısıyla ortak özelliklerin paylaşılabilmesi ve tekrar olmaması için ortak AngularJS yönergesi oluşturmalıyız.
Gereksinimler
Projeye başlamadan önce, yüklü bazı uygulamalara ihtiyacınız var.
1. Belirli komutlarla çalışmak için Node.js.
2. Optimizasyon için GulpJS ve klonlama için Git
3. WP REST API eklentisi ile WordPress kurulumu
Github komut satırında, HTML paket deposunu klonlamak için aşağıdakileri yazmanız gerekir –
$ git klonu https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cd yolu/klonlanmış/deposu Aşağıdaki satır Node.js modüllerini kuracaktır. $ npm yükleme
Kurulum biraz zaman alacak ve ardından kaynağı $ gulp komutunu kullanarak yürütecek. Bu, derlenen tüm kaynak dosyaların tutulduğu 'dist' adlı bir klasör oluşturacaktır.
Tamamlayıcı Eklentiyi Oluşturma Zamanı –
Daha önce belirttiğimiz gibi, WordPress destekli bir ön uç uygulaması oluşturmak için bir yardımcı eklenti oluşturmaya ihtiyacımız var. Aşağıdakiler, bir tamamlayıcı eklenti oluşturarak elde edeceğimiz şeylerdir.
Özellikler, bir gönderi için öne çıkan resim, bir gönderi için yazar adı ile birlikte Gravatar hesabından yazar resmi ve son olarak her gönderi için kategori listesidir.
wp-content/plugins klasörünüze gidin ve onu eklentinizle aynı şekilde adlandırın. Örneğin, sessiz refakatçi ile gidiyoruz.
Klasörün içine gidin ve klasörle aynı ada sahip bir php dosyası oluşturun. Açın ve bir eklenti oluşturmak için resmi bir başlangıç olan aşağıdaki kodu yapıştırın.
/** * Eklenti Adı: Quiescent Companion * Açıklama: Quiescent WP REST API temasıyla çalışacak eklenti * Yazar: Bilal Shahid * Yazar URI'si: http://imbilal.com */
Öne Çıkan Resim İçin Özel Alan Oluşturma
Bir gönderi için öne çıkan bir görsel oluşturmak için aşağıdaki kodu yapıştırın. Temel olarak, özel bir alan yaratacaktır ve tıpkı yaptığınız gibi öne çıkan görsel ekleyebilirsiniz.
/**
* Post nesnesi için yanıtı değiştirme
*/
işlev quiescent_modify_post_response() {
// öne çıkan resim için bir alan ekleme
register_rest_field('post', 'quiescent_featured_image', dizi(
'get_callback' ='quiescent_get_featured_image',
'update_callback' = boş,
'şema' = boş
) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response');
Aşağıdaki kod, öne çıkan görsel için özel alana bir isim vermek ve görseli almak içindir.
/**
* Öne çıkan resim bağlantısını alma işlevi
*/
function quiescent_get_featured_image( $post, $field_name, $request ) {
$attachment_id = $post['featured_media'];
$attachment_info = wp_get_attachment_image_src( $attachment_id, 'quiescent_post_thumbnail');
$attachment_info[0] döndür;
}
Son oluşturulan yöntemi kullanarak, bir gönderi hakkında kimliği, başlığı, içeriği ve benzerleri gibi birçok bilgiyi alabilirsiniz.
Aşağıdaki kod, öne çıkan görsel için özel bir boyut oluşturmak içindir. Boyut 712 x 348 piksel olarak tutulmuştur.
**
* Öne çıkan resim için resim boyutu ekleme
*/
function quiescent_add_image_size() {
add_image_size('quiescent_post_thumbnail', 712, 348, true);
}
add_action('init', 'quiescent_add_image_size');
İlk özel alan eklendiğinden dosyayı kaydedin, iki tane daha kaldı.
İlgili Mesaj: Kapak Resmi Vs WordPress Blok Düzenleyicide Öne Çıkan Resim
Kullanıcılar ve Kategoriler İçin Özel Alanlar Oluşturma
Yazar adını göstermek için alanı eklemek için kod aşağıdadır.
// yazar adı için bir alan ekleme
register_rest_field( 'gönder', 'sessiz_yetkili_adı', dizi(
'get_callback' = 'quiescent_get_author_name',
'update_callback' = boş,
'şema' = boş
) );
/**
* Yazar adını alma işlevi
*/
function quiescent_get_author_name( $post, $field_name, $request ) {
return get_the_author_meta('display_name', $post['yazar']);
}
Aşağıdaki kod, kategori adlarını eklemek içindir.
// kategoriler için bir alan ekleme
register_rest_field('gönder', 'sessiz_kategoriler', dizi(
'get_callback' = 'quiescent_get_categories',
'update_callback' = boş,
'şema' = boş
) );
/**
* Kategorileri alma işlevi
*/
function quiescent_get_categories( $post, $field_name, $request ) {
return get_the_category( $post['id'] );
}
Alanı kaydedin ve şimdi teneke hazır formda olmayan özellikler için üç farklı özel alan olarak quiescent_featured_image, quiescent_author_name, quiescent_categories var.
Gravatar Görüntüsünü Alma Pn 207 x 207 Piksel Formatı
Eksik olan son şey, Gravatar'dan yazarın fotoğrafı. Aşağıdaki kod sadece bunun içindir.
/**
* Kullanıcı nesnesi için yanıtı değiştirme
*/
function quiescent_modify_user_response() {
}
add_action( 'rest_api_init', 'quiescent_modify_user_response');
/**
* Kullanıcı nesnesi için yanıtı değiştirme
*/
function quiescent_modify_user_response() {
// 207 X 207 avatar için alan ekleme
register_rest_field( 'kullanıcı', 'sessiz_avatar_url', dizi(
'get_callback' ='quiescent_get_user_avatar',
'update_callback' = boş,
'şema' = boş
) );
}
/**
* Kullanıcı için avatarın alınması
*/
function quiescent_get_user_avatar( $user, $field_name, $request ) {
$args = dizi(
'boyut' = 207
);
return get_avatar_url( $user['id'], $args );
}
Şimdi tek yapmanız gereken, kaynaklar için şablonlar, rotalar ve hizmetler oluşturmak ve WordPress destekli bir ön uç oluşturmayı kolayca tamamlamak .