Yalnızca tarayıcıda WebAssembly ile çalışan, PHP tarafından desteklenen tam WordPress
WordPress Playground'u ilk kez gördüğünüzde, bunları sıradan bir site gibi kullanabilirsiniz. Her şey ancak Burada ihtiyacınız olan şey bir WordPress teknoloji yığını. doğrudan tarayıcınızda çalışan, PHP ve bir veritabanı dahil olmak üzere
Bu gönderide Adam Zieliñski (WordPress Playground lideri) ve Thomas Nattestad, (V8 için Ürün Yöneticisi) keşfedin:
- WordPress Playground, bir WordPress geliştiricisi olarak size nasıl yardımcı olabilir?
- Gelişmiş işleyiş şekli.
- Bu değişiklik WordPress'in geleceği için ne anlama geliyor?
WordPress'i yüklemeden kullanın, uygulamanıza yerleştirin, hatta JavaScript ile kontrol edin
Yerleşik WordPress'i playground.wordpress.net adresine ücretsiz olarak ulaşabilirsiniz. Evet, ve ödeme desteği sunmadığından bahsettiğimiz site tamamen ziyaret edebilirsiniz. Bu sayfayı başka hiç kimse ziyaret edemez. Aynı zamanda geçicidir. Siz bu değişikliği sayfayı yenilediğinizde kayboldu. Bu sitelerden istediğiniz sayıda prototip oluşturma, eklentileri deneme ve fikirleri hızla keşfetme.
Bunları, yerleşik PHP ve WordPress sürüm değiştirici:
WordPress Playground, WordPress'i kullanmanın yepyeni bir yoludur. Tam gücü,
Ancak kilidi, yalnızca uygulamanıza dahil ettiğinizde açılır. Kolay yol,
WordPress Playground'u <iframe> içinde
sorgu parametreleri API'sını kullanın.
Resmi vitrinde bunlar yer alıyor.
yapıyor. Örneğin, seçtiğiniz zaman
Pendant tema ve
Coblocks eklentisi, yerleştirilmiş iframe
güncellenerek
https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
iframe kolay bir başlangıç yöntemidir, ancak yalnızca temel yapılandırma seçeneği. Daha fazlasına ihtiyacınız varsa daha fazla bilgi edineceksiniz.
WordPress Playground JavaScript istemcisi, yerleştirilmiş site üzerinde tam kontrol sağlar
Dosya sistemi ve PHP dahil olmak üzere WordPress sitesinin tamamını kontrol edebilirsiniz. API'nin sunduğu tüm API'leri kullanarak @wp-playground/client npm paketinden yararlanın. Aşağıdaki örnekte bunun nasıl kullanılacağı gösterilmektedir: etkileşimli eğitim inceleyebilirsiniz:
import {
connectPlayground,
login,
connectPlayground,
} from '@wp-playground/client';
const client = await connectPlayground(
document.getElementById('wp'), // An iframe
{ loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();
// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');
// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });
// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);
WebAssembly PHP'yi WordPress olmadan da kullanın
WordPress Playground bir monolit değildir. WebAssembly PHP yayınlandı ve bağımsız olarak da kullanabilirsiniz. Web için @php-wasm/web npm'yi kullanabilirsiniz paket boyutu için optimize edilmiştir ve Node.js'de @php-wasm/node adresinde daha fazla PHP uzantısı eklemek istiyorum. Adam etkileşimli PHP snippet'leri eklemek için ilkini kullandı bu WP_HTML_Tag_Processor eğiticisine göz atın. Aşağıda, nasıl kullanılacağına dair bir ipucu verilmiştir:
import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
requestHandler: {
documentRoot: '/www',
},
});
// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });
// Or use the familiar HTTP concepts:
const response = php.request({
method: 'POST',
relativeUrl: '/index.php',
data: { name: 'John' },
});
console.log(response.text); // Hello John
Bu noktada, bu çözüm nasıl çalışıyor? diye düşünmeniz gerekir. Bu sorunuzla önemli bir noktaya değindiniz. İç ayrıntılara girelim ve bunu öğrenelim. Kayışın!
Gelişmiş seçenekler arasında WebAssembly PHP, SQL çevirmeni ve tarayıcı içi sunucu
PHP, WebAssembly ikili programı olarak çalışır
PHP anında tarayıcıda çalışmaz. WordPress Oyun Alanı , bağlı iletişim hattı PHP yorumlayıcısını WebAssembly'de derlemek Emscripten kullanarak. Vanilla PHP oluşturmak aşırı karmaşık değildir. Sadece işlev imzasını burada düzenleyebilirsiniz, orada bir yapılandırma değişkenini zorunlu kıldığınızda, ve uygulanıyor. birkaç küçük yama kullanın. Kendiniz nasıl oluşturabileceğiniz aşağıda açıklanmıştır:
git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2
Ancak vanilla PHP derlemeleri tarayıcıda pek kullanışlı değildir. Sunucu olarak
yazılımı, PHP'nin istek gövdesini iletecek bir JavaScript API'si yok,
dosyalarını açabilir veya php://stdin akışını doldurabilirsiniz. WordPress Playground'un
her şeyi öğreteceğim. WebAssembly ikili programı,
özel PHP API modülü
C ve a dilinde
Şu JavaScript PHP sınıfı:
writeFile() veya run() gibi yöntemleri ortaya çıkarır.
Her PHP sürümü yalnızca statik bir .wasm dosyası olduğundan, PHP sürümü
gerçekten de oldukça sıkıcı. Tarayıcıya yalnızca içeriği indirmesini söyler,
php_8_2.wasm yerine php_7_3.wasm kullanabilirsiniz.
Veritabanı, SQL çeviri katmanıyla destekleniyor
WordPress için MySQL gerekir. Ancak MySQL'in WebAssembly sürümü yoktur çalıştırılabilir. Bu nedenle WordPress Playground, PHP'yi yerel SQLite sürücüsü ve SQLite'a güveniyor.
Peki WordPress farklı bir veritabanında nasıl çalışabilir?
Resmi görevli perde arkasında SQLite Veritabanı Entegrasyonu eklentisi, tüm MySQL sorgularına müdahale eder ve bunları SQLite diyalektinde yeniden yazar. 2.0 serbest bırakma gemileri WordPress Playground'dan bilgi alan yeni bir çeviri katmanı bu, SQLite'daki WordPress'in, WordPress birim test paketinin% 99'unu geçmesine olanak tanıyor.
Web sunucusu tarayıcının içinde bulunur
Normal bir WordPress'te Blog gibi bir bağlantıyı tıklamak, WordPress'i
blog sayfasını getirmek için uzak arka uca istekte bulunur. Bununla birlikte, WordPress
Playground'un uzak arka ucu yok. İçinde
Hizmet çalışanı
Bu komut, tüm giden isteklere müdahale edip bunları tarayıcıdaki bir PHP'ye ileten
örneğin farklı bir yerde çalışan
Web Çalışanı.
Ağ iletişimi WebSockets üzerinden desteklenir
Ağ konusunda WebAssembly programları, JavaScript API'leri. Bu hem güvenlik hem de zorluk yaratan bir özellik. TSSB JavaScript'te mevcut üst düzey eşzamansız API'ler nedir?
WordPress Playground için yanıt, bir WebSocket - TCP soket proxy'si içerir.
Eşzamansız ve derin yama uygulama
php_select gibi PHP dahili değerleri. Karmaşık bir iş olsa da ödül de var. İlgili içeriği oluşturmak için kullanılan
Node.js hedefli PHP derlemesi web API'leri isteyebilir, oluşturucu paketlerini yükleyebilir ve
bir MySQL sunucusuna bile bağlanabilirsiniz.
WordPress, tarayıcıdan daha fazla yerde kullanılabilir
WordPress artık WebAssembly'de çalışabileceğinden onu Node.js'de de çalıştırabilirsiniz Bu, aynı V8 motorudur! Tabii ki StackBlitz ile şunları da çalıştırabilirsiniz: Node.js'yi doğrudan tarayıcıda kullanabilirsiniz. Böylece WordPress ve PHP'yi çalıştırabilirsiniz. Node.js'de yürüterek WebAssembly'de derlenir ve WebAssembly çalışıyor ayarlayın. WebAssembly, sunucusuz alanda da popülerlik kazanıyor. bu altyapıda da çalışabilir.
Gelecekte sıfır kurulum, etkileşimli ve ortak çalışmaya dayalı WordPress uygulamaları gelebilir
Diyelim ki doğrudan bir kod düzenleyiciye girip ve tüm kurulum tamamlanmış olur. Hatta bir grup insanın basit bir bağlantıyı tıklayıp çok oyunculu düzenleme oturumu başlatın (örneğin, Google Dokümanlar'da). Ve size tek bir tıklamayla kolayca ulaşabilir ve ürünlerinizi Oluşturduğunuz içerikleri çeşitli barındırma hizmetlerine sunar. Üstelik bunların hepsi, yerel!
Bu yalnızca bir özet. Karşınıza etkileşimli eğiticiler, canlı eklenti demoları, kullanıma hazır hale getirme, uç sunucularda merkezi olmayan WordPress ve hatta yükleyebilirsiniz.
Heyecan verici bir gelecek sizi bekliyor. Kendinizin de parçası olabilirsiniz. Fikirleriniz ve katkılarınız WordPress Playground'un oksijeni. Ziyaret edin: GitHub deposuna gidin, #meta-playground'da merhaba WordPress.org Slack kanalını ziyaret edin ve Adam'la adam@adamziel.com adresinden iletişime geçin.