WordPress -Powered CMS’nin ön ucu oluşturma uygulamaları veya projeler oluşturma

WordPress tarafından desteklenen bir ön uç uygulaması oluşturmak WP REST API ve AngularJS hakkında bilgi gerektirir. WordPress ile herhangi bir uygulamayı arka uç olarak oluşturabilirsiniz. WordPress’teki geleneksel temalardan ve popüler yönetici modellerinden kendinizi kurtarabilirsiniz. Bu WordPress ön uç oluşturma makalesinde, üstün yayınlar, kategoriler ve kullanıcı listesi sayfaları içeren bir arayüz oluşturacağız. WordPress ön uç uygulaması oluşturmak için tel kafes yardımına ihtiyacınız olacak. Projenin genel açıklaması, gereksinimleri anlama ve tüm projeyi planlama zamanıdır. İhtiyacımız olan ilk şey, yayınlar, kullanıcılar ve kategoriler için sayfaların ve tek sayfaların bir listesini yapmaktır.
Bu nedenle, sayfa için bir şablona ihtiyacımız var. Liste sayfasında sayfalandırılmış bir dizi yayın görüntülenir. Liste sayfasının kabaca nasıl görüntülenmesi aşağıdadır.

Aşağıda tek bir post şablon ekranıdır.

Çerçeve görüntüsünde sahip olduğumuz özelliklerin çoğu WP REST API ile kullanılabilir, ancak kendimizi üstün görüntü bağlantıları, kategori adları ve yazar adları gibi eklememiz gereken bazı ek özellikler vardır. Daha ileri gidip yayın çerçevesinin kategorilerinin ve resimlerinin nasıl görülmesi gerektiğini analiz edelim. Bir kategori şablonu olmalıdır.

Bu kullanıcı şablonunun görünümüdür.

Bu özelliklerden bazılarına sahip olmak için bir eşlik eklentisine ihtiyacınız var. Ayrıca, tüm bu şablonlardaki bazı ortak özelliklerin bazı ortak özelliklerinin olduğunu göreceksiniz ve bu nedenle genel özelliklerin paylaşılabilmesi ve tekrarlanması için genel AngularJS direktifleri oluşturmalıyız. Gereksinimler Projeye başlamadan önce, birkaç uygulama yüklemeniz gerekir. 1. NODE.JS Belirli komutlarla çalışmak. 2. Klonlama için optimize etmek ve git için GULPJS 3. WordPress’in GitHub komut satırına WP REST API eklentisi ile kurulumu, HTML Paket Deposu-$ Git Klonunu klonlamak için aşağıdakileri yazmalısınız https://github.com/bilalvirgo10 /quiescent -api -html.git
$ Cd/to/klonlama/depo yolu
Aşağıdaki satır Node.js.
$ Npm yükleme
Kurulum zaman alacak ve ardından $ Gulp komutunu kullanarak kaynağı çalıştıracaktır. Bu, derlenen tüm kaynak dosyaların depolandığı ‘dist’ adlı bir klasör oluşturur. Bir şirket eklentisi oluşturmanın zamanı geldi – daha önce de belirttiğimiz gibi, WordPress tarafından güçlendirilmiş bir ön uç uygulaması oluşturmak için bir şirket eklentisine ihtiyacımız olduğunu. Bir arkadaş eklentisi oluşturarak elde edeceğimiz şeyler aşağıdadır.
Özellikler, Gravatar hesabından yazarın görüntüsü ve son olarak her yazı için kategorilerin bir listesi ile birlikte yazarın adı olan bir gönderi için üstün resimlerdir. WP-Content/Eklentileri klasörünüzü açın ve eklentinizle aynı adı adlandırın. Örneğin, sessiz bir arkadaşla gidiyoruz. Klasörü girin ve klasörle aynı ada sahip bir PHP dosyası oluşturun. Bir eklenti oluşturmak için resmi bir başlangıç ​​olan aşağıdaki kodu açın ve yapıştırın.
* Eklenti Adı: Sessizlik
* Açıklama: WP REST API Silent temasıyla çalışmak için eklenti* Yazar: Bilal Shahid
* Yazar uri: http://imbilal.com
*/
Üstün görüntüler için özel bir alan oluşturun
Bir yazı için üstün bir görüntü oluşturmayı amaçlayan aşağıdaki kodu yapıştırın. Temel olarak, bu özel bir alan oluşturacak ve yaptığınız gibi üstün görüntüler ekleyebilirsiniz ./**
* Gönderen nesnelere yanıtları değiştirme

*/
quiescent_modify_post_response () işlevi {
// üstün resimler için alan ekleyin
Register_rest_field (‘post’, ‘quiescent_featured_image’, dizi (
‘get_callback’ = ‘quiescent_get_featured_image’,
‘update_callback’ = sıfır,
‘Şema’ = NULL
));
}
Add_action (‘rest_api_init’, ‘quiescent_modify_post_response’);
Aşağıdaki kod, üstün görüntüler için özel bir alana bir isim vermek ve fotoğraf çekmektir.
/**
* Üstün bir resim bağlantısı almak için işlev
*/
İşlev quiescent_get_featured_image ($ post, $ field_name, $ istek) {
$ attacment_id = $ post [‘featured_media’];
$ attackment_info = wp_get_attachment_image_src ($ attackment_id, ‘quiescent_post_thumbnail’);
Return $ attebment_info [0];
}
Oluşturulan son yöntemi kullanarak, kimlik, başlık, içerik ve diğerleri gibi yayınlar hakkında çok fazla bilgi alabilirsiniz. Aşağıdaki kod, üstün görüntüler için özel bir boyut oluşturmaktır. Boyutu 712 x 348 pikselde tutulur. **
* Üstün görüntüler için resim ekleyin
*/
quiescent_add_image_size () işlevi {
add_image_size (‘quiescent_post_thumbnail’, 712, 348, true);
}
Add_action (‘init’, ‘quiescent_add_image_size’);
Dosyayı kaydedin çünkü ilk özel alan eklendiğinden, iki tane daha. İlgili gönderi: Kapak vs görüntü WordPress blok düzenleyicisindeki üstün görüntü kullanıcılar için özel bir alan oluşturur ve aşağıdaki kategoriler yazarın adını göstermek için alanlar eklemek için kodlardır.
// Yazarın adına alan ekleyin
Register_rest_field (‘post’, ‘quiescent_author_name’, dizi (
‘get_callback’ = ‘quiescent_get_author_name’,
‘update_callback’ = sıfır,
‘Şema’ = NULL
));
/**
* Yazarın adını almak için işlev
*/
İşlev quiescent_get_author_name ($ post, $ field_name, $ istek) {
return get_the_author_meta (‘display_name’, $ post [‘yazar’]);
}
Aşağıdaki kod, kategorinin adını eklemektir.
// Kategori için alan ekleyin
Register_rest_field (‘post’, ‘quiescent_categories’, dizi (
‘get_callback’ = ‘quiescent_get_categories’,
‘update_callback’ = sıfır,
‘Şema’ = NULL
));
/**
* Kategoriyi almak için işlev
*/
İşlev quiescent_get_categories ($ post, $ field_name, $ istek) {
return get_the_category ($ post [‘id’]);
}
Alanı kaydedin ve şimdi quiescent_featured_image, quiescent_author_name, quiescent_categories, hazırlanacak şekilde olmayan özellikler için üç farklı özel alan olarak.
Gravatar PN 207 X 207 Piksel Formatı Resimini Çekin Kaybolan Son Şey, Gravatar’dan yazarın bir fotoğrafıdır. Aşağıdaki kod yalnızca bunun için tasarlanmıştır.
/**
* Kullanıcı nesnelerine yanıtları değiştirme
*/
quiescent_modify_user_response () işlevi {
}
Add_action (‘rest_api_init’, ‘quiescent_modify_user_response’);
/**
* Kullanıcı nesnelerine yanıtları değiştirmek*/
quiescent_modify_user_response () işlevi {
// Avatar 207 x 207 için alan ekleyin
register_rest_field (‘kullanıcı’, ‘quiescent_avatar_url’, dizi (
‘get_callback’ = ‘quiescent_get_user_avatar’,
‘update_callback’ = sıfır,
‘Şema’ = NULL
));
}
/**
* Kullanıcılar için avatar al
*/
İşlev quiescent_get_user_avatar ($ user, $ field_name, $ istek) {
$ args = dizi (
‘Boyut’ = 207
);
dönüş get_avatar_url ($ user [‘id’], $ args);
}
Şimdi, tek yapmanız gereken kaynaklar için bir şablon, rota ve hizmet yapmak ve WordPress’in yapım sonunu kolayca tamamlamaktır.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir