WordPress eklentilerinde React.js Uygulamaları Yazmak İçin Basit Yol
Bu makaleye bir gösteri ile başlayacağız:
(Bence, birinci sorular için doğru cevap “C” ve ikinci sorular için “A” veya “B”, ama bu size kalmış. Ayrıca, lütfen bugün bir test yapmak için kullandığım eklentiyi indirin!) Diğer karmaşık teknolojiyle uğraşmak zorunda kalmadan, iyi bilinen bir WordPress ortamında JavaScript uygulamalarının oluşturulmasını öğrenmeye başlamanıza öğreteceğim. Peki bu nedir? Facebook ve Instagram’da bir dahi milyarder tarafından oluşturulan bir sıcak-sıcak javascript çerçevesi olan React.js üzerine inşa edilmiş basit bir web uygulamasıdır.
Matt Mullenweg ve diğerleri tarafından onaylandığı gibi, JavaScript web geliştirmenin geleceğidir. Ancak en havalı JavaScript teknolojisinin çoğu (JQuery’nin yanı sıra) tam bir teknoloji yığını gerektiriyor gibi görünüyor – bu da aynı anda çok fazla öğrenme koyuyor. Ama öğrenmeye başladığımda, böyle olmak zorunda değil! Bu yüzden bugünün makalesinin amacı özeldir ve size tepki vermemeyi öğretmez. Tersine, bugün size React.js (ve benzer çerçeveler), zaten bilinen WordPress ortamında, beni öğrenmeden çıkmaya teşvik etme eğiliminde olan diğer birçok karmaşık teknolojiyle uğraşmak zorunda kalmadan nasıl başlayacağınızı öğreteceğim. uygulama geliştirme. .
JavaScript çerçevesine bir WordPress uzmanı olarak yaklaşmak, JS çerçevesine tam olarak girmekte tereddüt ediyorum, çünkü aynı zamanda “tam yığınları” öğrenme ihtiyacı, çok fazla öğrenme gerektiriyor gibi görünüyor. Dürüst olacağım: Web uygulamalarının geliştirilmesi biraz korkuyor. Esas olarak WordPress’te çalışmak, bir web uygulaması oluşturmak “en derin son” gibi hissediyor – ve aynı zamanda tüm teknolojilerin “gerçek” toplandığı yerde. Aynı zamanda Facebook, Twitter, Airbnb, Spotify ve bu nedenle en havalı şeyleri yapmak için en havalı şeyler için bir yerdir-en havalı şeyleri yapmak için, kullanıcılarla bilgi sitesi (ki WordPress vakalarının en iyi kullanımı). Uygulama geliştirmeye çok yavaş girmemin ana nedeni, WordPress çalışması ve diğer web geliştirme türleri arasında çok büyük bir boşluk gibi hissettiren şeydir. React.js’deki büyük bir proje üzerinde çalışmak için, sadece React.js; “Tam Yığın” ı bilmeniz gerekir. Bunun gibi tam yığınlar şöyle görünebilir: Node.js (veya diğer arka uç çözümleri, belki PHP çerçevesi); Homurdanma (veya diğer ödevlerin koşucusu); Bower (veya diğer paket yöneticisi); Belki bilmediğim birçok araç; Ve son olarak Angular.js veya React.js gibi JavaScript ön uç çerçevesi. Birçoğu hemen öğrenilmelidir – bu yüzden çoğum yapmadım.
Arka uç site mimarisiyle çok fazla etkileşime girmeden WordPress’te JavaScript ön uç çerçevesini kullanmaya başlayabilirsiniz.Aynı yerdeyseniz, bugünün makalesi iyi bir haber olabilir.WordPress ortamında JavaScript ön uç çerçevesini kullanmaya başlamak için yeterince kolay olduğu ve arka uç site mimarisiyle çok fazla etkileşime girmeden yeterince kolay olduğu ortaya çıktı.Şimdiye kadarki deneyimlerime göre, bu bu çerçeveyi öğrenmenin iyi bir yolu.React.js uygulamasının nasıl ayarlanması WordPress eklentisi aracılığıyla kalan bu makalede size REACT.JS Quiz Uygulama Ayarlarımız aracılığıyla size rehberlik edecektir.Tam demo kodu buradan indirilebilir, bu yüzden kazın!
Tam PHP Eklenti Kodu Bu tüm eklenti PHP dosyasıdır: <? PHP /* Eklenti Adı: WPPT React Sınav Açıklama: WordPress'te React.js Quiz! Yazar: Yazar URI: http://pressupinc.com */// Kısa kodu Çıktıya ihtiyaç duyulan işaretleme add_shortcode ('wspout_react_quiz', 'windshout_react_quiz_show_quiz'); İşlev wspout_react_quiz_show_quiz () {return '
‘; } Add_action (‘wp_enqueue_scripts’, ‘wspout_react_quiz_enqueue_scripts’); İşlev wspspout_react_quiz_enqueue_scripts () {// (! İs_single (10742)) {return; } wp_enqueue_script (‘react’, eklenti_dir_url (__file__). ‘React/Build/react.min.js’); wp_enqueue_script (‘react-dom’, eklenti_dir_url (__file__). wp_enqueue_script (‘Babel’, ‘https://npmcdn.com/otamail korumalı] /browser.min.js’, ”, null, false); wp_enqueue_script (‘wpshout-reaact-quiz’, eklenti_dir_url (__file__). ‘wpshout-eact-qiz.js’); wp_enqueue_style (‘WPSHOUT-React-Quiz’, eklenti_dir_url (__file__). ‘wpshout-react-qiz.css’); } // “Babel” türü ekle quiz script add_filter (‘script_loader_tag’, ‘wspspout_react_quiz_add_babel_type’, 10, 3); İşlev wspspout_react_quiz_add_babel_type ($ tag, $ hone, $ src) {if ($ hone! } Return ‘
‘. ”
“;} Her düğme işlevine bakalım.
Add_shortcode (): Kısaylık koduna bir sınav kaydedin, sınavı görüntülemenin en kolay yolu kısa bir koddan. Bu bölüm aşağıdaki durumu oluşturmak için add_shortcode () kullanılır: Bir gönderi her bir metin içerdiğinde [wspout_react_quiz], wordPress aşağıdaki işaretlemeyi görüntüler:
. Bu boş div, Quiz ile React.js komut dosyası tarafından doldurulacaktır. wp_enqueue_scripts: Komut dosyasını seçici olarak Quiz Demo sayfasında seçici olarak bırakın Bu bölüm, oldukça ilkel olan wp_enqueue_scripts () kullanımını içeriyor: WPSOT’daki her sayfanın React.js’yi çekmesini istemiyorum, bu yüzden sadece komut dosyası göndermeyi sıralıyorum. POS 10742 ID, şu anda okuduğunuz yazı. Dikkat edilmesi gereken bir başka önemli şey, uzaktan okuduğum reaksiyon öğreticisine dayanan JS Pustaka’yı kullanmam, uzaktan diğer yerlerde özel adresi arayarak kullanmam ağ. İsteğin yazılma şekline dikkat edin: // ile başlamak, HTTPS aracılığıyla kaynakları güvenli bir şekilde çekmemizi sağlar, çünkü wpsout (SSL altında) güvensiz kaynakları çekmez. Buradaki sonuç, ihtiyacınız olan JavaScript kaynaklarının olduğu yerde sabit bir harici bir URL varsa ve potansiyel performansın uzaktan alınmasının etkilerinin umursamıyorsanız, bunu uzaktan çağırabilirsiniz. Doğrudan eklentiye sürüklemek veya bir paket yöneticisi kullanarak.
Script_loader_tag: Ana JavaScript dosyamızda Babylon’u etkinleştirmek, PHP eklenti kodunun en belirsiz kısmıdır. Ana JavaScript dosyamızın şöyle görünmesi gerektiği için var:
Özellikle, Metin/Babel bölümü orada çok önemlidir: Dosya, Babil kütüphanesinde yapmamız gereken tüm harika şeyleri kullanabilir. Şimdi, Metni/Babel’i WordPress tarafından enque yaptığımız komut dosyası etiketine nasıl giriyoruz? Bildiğim tek yol, güzel bir filtre wordpress script_loader_tag aracılığıyla ve bu işlevde olduğu gibi dizilerin ayrışmasıdır. Sadece çok basit bir kısa kod kaydetti ve birkaç senaryo ve bir sayfa anlattı. Bu doğrudur, çünkü tüm ağır işler kendi React.js uygulamamızda yapılmalıdır. Yığın eklentisinin geri kalanıyla çalışmak, React.js’nin kendisine odaklanmak için sıradan bir teknoloji yığınındaki elemanların çoğunu önler veya görmezden gelir. PHP burada zor bir kısım değil – React.js gibi öğrenmemi engelleyen kısım değil. Tersine, React.js gibi ön uç araçların etrafındaki tüm teknolojiler beni durdurdu. Bu eklenti her şeyi önler veya görmezden gelir – ve nasıl yapılacağını keşfedeceğimiz bir sonraki şeydir.
WordPress veritabanı ile veri alışverişi yapmak için bir JS uygulaması istiyorsanız arka uç mimarisi ile ilişki yoktur, en iyi yol WP-API aracılığıyladır. Ancak ateşle çalışmak sürecin kendisidir ve yine de WordPress’in çekirdeğine tam olarak girmemiştir. Sınavım, sorunu sadece verilerin kendisini yaparak (gerçekten, göz ardı etmek), başka bir yerde verilerle bağlantılı olmayan yaklaşıyor. Özellikle, JavaScript uygulaması JSON nesneleri kullanıyor, bu yüzden sorumu doğrudan ana JS dosyasındaki JSON nesnesine yazdım. Bu dosya, sınav için tüm ağır görevleri yapan React kullanan JavaScript dosyası WPSHOUT-React-Qiiz.js’dir. Sınav verileri şöyle görünüyor: / * JSON verileri * / var myData = [{sorgu metni: “Bir wordPress ortam farkına reaksiyon. ! “,” Şey, tamam “,” Hoşçakal “}]; Ayrıca, radyo düğmesini tıklatarak hangi cevapları seçtiğiniz hakkında veriler için aynı dosyada boş bir mağaza yaptım: var answerData = [];
Basit bir proje yaparsanız – özellikle öğrenmek için – JSON verilerini doğrudan uygulamanızda yazmayı ve kullanmayı düşünün. Bu veriler JS uygulaması dışında hiçbir yerde değildir, bu nedenle sizinle ilgili hiçbir şey bilmiyorsunuz ve tarayıcıyı yenilediğinizde tamamen kaybolursunuz. Basit bir sınav için, bu mükemmel! Kısacası, nispeten basit bir proje yaparsanız – özellikle öğrenmek için – veri depolama ile ilgili tüm sorulardan uzaklaşmayı düşünebilir ve doğrudan uygulamanızda kendi JSON nesnenizi yazıp kullanabilirsiniz. Paket Yönetim Aracı Yok React.js almak için doğru yol, web’den indirerek açıkça değildir. Neden? Şimdi, kullandığınız React.js sürümünü kristalleştirerek, React.js’nin kendisi değişmeye ve artmaya devam ettiği için daha derin bir teknik borca kaydolursunuz. Bu, Bower gibi bir paket yöneticisi tarafından çözülmesi gereken doğru sorudur. Ancak sorun budur: Bunu kullanmayı öğrenmek, sadece en iyi günlerimde aldığım komut satırıyla çok fazla samimiyet ve rahatlık anlamına gelir. Benim gibiyseniz ve basit bir proje yaparsanız (özellikle kendi çalışmanız için), paketinizi doğrudan GitHub’dan almanızı öneririm. Şöyle görünüyor:
Teknik borcu taşıyacaksınız, evet, ancak bu, küçük bir kapsam veya kısa yaşam ömrü olan proje veya diğer projeleri öğrenmek için çok fazla bir sorun değil.Daha da önemlisi, Bower’ı koşmanın artık öğrenmeniz için bir engel olmamasıdır.Artık teknolojiyi basit tutmuyor, başka bir yüz saatlik öğrenme eğrisi tarafından sular altında kalmadan React.js’nin temellerini öğreneyim.Bu makalede tartıştığım şey kullandığım tüm teknoloji!Bir sınav oluşturmak komut satırında hiçbir şey içermez, Node.js’de hiçbir şey yoktur, WP-API ile hiçbir şey yoktur, git, bower, homurdanma veya gulp ile hiçbir şey yoktur ve sanırım liste devam eder.Bu, yüz saatlik bir öğrenme eğrisi ile sürekli olarak sular altında kalmadan React.js’nin temellerini öğrenebileceğim anlamına geliyor.Ancak açıklığa kavuşturmanın doğru yolunu öğrenin: Bu makalede verdiğim tavsiye, istisnasız “yanlış yol” dır.
