WordPress ile Paper.js kullanarak kalabalıktan nasıl öne çıkılır

Eşsiz ve havalı bir şey yapmak için WordPress sayfalarınızı çizmek, boyamak ve canlandırmak mı istiyorsunuz? Örneğin, her zaman gizlice sitenizde denizanası yüzmek istemiyor musunuz? Kim değil! Peki – bugün şanslı gününüz çünkü Paper.js, Patto ve Paperoids gibi sitelere izin veren parlak JavaScript kütüphanesini tartışacağız. Paper.js daha önce kullandıysanız ve sadece kağıt.js wordpress ile nasıl entegre olacağınızı bilmek istiyorsanız, girişi geçmek için tereddüt etmeyin! İçindekiler:
Paper.js nedir?
Paper.js ve kim için ne yapabilirim?
Paper.js web siteme nasıl yüklerim?
WordPress için Paper.js’yi nasıl ayarlarım?
Paper.js nedir? Paper.js, grafik komut dosyalarıyla olağanüstü şeyler yapmanızı sağlayan bir JavaScript çerçevesidir. Bu, tasarımcılar ve geliştiriciler tarafından sevilen kendi kendine ilan edilen vektör grafik komut dosyalarının İsviçre ordu bıçağıdır.
Paper.js, HTML5 tuvalinde çalışan açık kaynak vektör grafik komut dosyası için bir çerçevedir. Temiz bir grafik / belge nesne modeli ve vektör grafikleri ve Bezier eğrileri oluşturmak ve çalışmak için birçok güçlü işlev sunar, hepsi iyi tasarlanmış, tutarlı ve temiz bir programlama arayüzüne düzgün bir şekilde sarılır.
Paper.js, scripograf, aktif bir senaryo topluluğuna sahip Adobe Illustrator için senaryo ortamı ve 10 yıldan fazla geliştirme ile uyumludur.
Paper.js, yeni başlayanlar için öğrenmek kolaydır ve orta ve gelişmiş kullanıcılar için ustalaşması gereken birçok şeye sahiptir.
Bu, web sitenizi daha eğlenceli ve web sitenizi daha kolay hale getirmenin eğlenceli bir yolunu yapmanın kolay bir yoludur. Şunu görelim: JQuery steroidlerde javascript ise, Paper.js mantarlarda javascript – oradan tüm yaratıcılık kaynaklarıdır.
Temel Kavramlar: Tuval ve kağıt belgesi, tam anlamıyla tuval olarak hareket eden HTML5 öğeleridir. Biliyorum! Bu grafikler için bir kaptır. Komut dosyasını gerçekten grafik çizmek için kullanmalısınız. Varsayılan olarak, öğelerinin içeriği veya sınırları yoktur. Paper.js dosyasına veya aşağıdaki örnekte daha yakından bakarsanız, “Text/JavaScript” yerine bir “metin/kağıt komut dosyası” olduğunu göreceksiniz.
94F9CF90F0AED55CE009CE6A418AB100 DIGIST içerir
Paperscript, Paper.js için özel olarak yapılmış özel bir dil alanıdır, bu nedenle kağıt.js dahil olmak üzere çalışmaz.
Paper.js ve kim için ne yapabilirim? Paper.js, çeşitli renk ve boyutlarda yol ve şekiller kolayca çizebilirsiniz. Öğeler, nesneler, raster, etkileşimli araçlar ve katmanlar yapabilirsiniz. Öğeleri canlandırabilir, matematiksel işlemler ekleyebilir ve hatta kendi oyununuzu oluşturabilirsiniz. Kısacası, Paper.js’de yapabileceğiniz şey aslında sadece yaratıcılığınız ve hayal gücünüzle sınırlıdır. Paper.js’nin temel özellikleri:
Belge Nesne Modülü
Yollar ve segmentler yapın
Animasyon
Fare ve klavye etkileşimleri
SVG’yi içe aktarın ve dışa aktarın
Raster görüntüleri ve ortalama renkler
Vektör geometrisi
Matematiksel işlemler
Nesne dönüşümü
Bu öğreticide her özellik ve kağıt özelliğini açıklamak istemediğimi unutmayın. WordPress’e Paper.js ayarlamaya odaklanacağım. Paper.js’in işlevselliği ve özel özellikleri hakkında daha fazla bilgi edinmek istiyorsanız, resmi web sitelerinde harika bir öğretici bulabilirsiniz. Teknik olarak aynı şeyleri JavaScript vanilyasında yapabilirsiniz, ancak bu size satır kodundan sonra satır getirecektir. JavaScript uygulamasına aşina olanlar ve Adobe Illustrator gibi vektörler çizenler kağıt dikkate alacak. JS çok sezgisel ve büyük olasılıkla en büyük kar elde edecek. Paper.js’de illüstratöre çizme şeklinize benzer bir yol yapabilirsiniz. Tabii ki, temel JavaScript bilgisi gereklidir. Paper.js web siteme nasıl yüklerim? Bir OD Bower düğümünüz varsa, kağıt veya yazlık yükleme komutları yükleme veya yazlık yükleme komutları kullanabilirsiniz. Değilse, web sitenize Paper.js eklemek için, önce http://paperjs.org/download/ adresindeki resmi web sitelerinden indirmeniz gerekir.
Proje klasörünüze indirilen indirme dosyasını açın (örneğin varlıkta). HTML dosyanızın kafasına aşağıdaki komut dosyasını ekleyin:
Yükleme Çekirdeği 99D1B558CDD489970FA907338F7D88CD
Vücudunuza tuval öğeleri eklemeyi unutmayın – kağıt betiğinde yaptığınız her şey sadece tuvalde görülecektir. Komut dosyalarınızı html kafanıza yazmanız gerekmez – ayrıca ayrı bir kağıt komut dosyası dosyası oluşturabilir ve https://gist.github.com/crogro/5d790bc192817b42f0b64495c8cf7de6.js nasıl eklenir Paper.js WordPress’e WordPress’e WordPress’e mi? Bu öğreticiyi tamamlamak ve WordPress sitenize inanılmaz bir kağıt.js işlevselliği eklemek için CPanel ve dosya yöneticinize erişmeniz gerekir. TAMAM? Harika, hadi gidelim! Adım 1: Çocuğunuzun temasını oluştur, çocuğunuzun temasını manuel olarak yapabilir. Tembelim, bu yüzden bir alt tema oluşturucu eklentisi kullanıyorum (eklentileri çocuğunuzun temasını oluşturur oluşturmaz silebilirsiniz). Bu öğreticide, Astra temasını çocuk temam için ebeveyn olarak kullanacağım. Adım 2: Paper.js’nin en son sürümünü indirin. En son sürümü indirin http://paperjs.org/download/ İndirilen ve “uzak” klasörü açan zip dosyalarını açın. Orada tam çekirdek JavaScript dosyaları ve kağıt bulacaksınız. Kağıt-tam-min.js kullanacağım çünkü kağıt filden biraz daha hafif.
Adım 3: Bu dosya yöneticisi aracılığıyla full.min.js kağıdı çocuğunuzun tema klasörüne yükleyin, umarım. Çocuğumun temasının konumu/wp-content/themes/Astra-child/Adım 4: Sayfanıza kağıt-fil betiği.min.js girin. Hala dosya yöneticisindeyiz. Çocuk temanızı açın ve functions.php dosyasını açın. Değiştirmeden önce işlevinizi yapmanız önerilir.php rezervleri. Aşağıdaki kodu function.php dosyasına kopyalayın.
Bu senaryo kağıt.js kütüphanesini bekliyor. “Enqueue_paper” sadece bu işlev için verdiğim bir isim. Her şey olabilir, ama onu daha sonra tam adla (kavrama) aramalısınız.
Bu kodun tüm WordPress sitelerinize full.min.js kağıdı bırakacağını unutmayın. Konsolu kontrol edin – Bir hata göstermezse, doğru teslim edilir. Konsol bile ekleyebilirsiniz
Belirli bir sayfaya bir kağıt.js komut dosyası eklemek istiyorum, böylece işlevime koşullu bir etiket eklemem gerekiyor. Bunun gibi:
Çekirdek f5bb8fd05effed9e89c53d3e6950ea3 içerir
Bu durumda, 148 benim sayfa kimliğim. Farklı olabilirsin. Gönderi veya sayfa kimliğinizi görmenin en hızlı yolu, arka uçta düzenlediğinizde URL’yi kontrol etmektir. Örneğin, sayfamda şu URL var:
MyDomain.com/wp-admin/post.php?post= 148 & Action = Post’tan sonra numaraları düzenle = sayfa kimliğinizdir. Bu yazıyı görmüyorsanız, Enqueing’in arkasındaki teori, Enqueing böyle çalışır. Komut dosyalarınızı HTML üstbilginize veya altbilginize eklemek yerine, WordPress’te WP_ENQUEUE_SCRICT kullanmanız gerekir. Bu, çeşitli komut dosyalarının siteyi karıştırmamasını ve zarar vermemesini sağlamaktır. Böylece, wp_enqueue_script’in işlevi Enqueues betiğini tescil ettirdi ve yaptı. Diseksiyon: wp_enqueue_script ($ hando, $ source, $ bağımlılıkları, $ sürüm, $ in_footer); $ tute sadece benzersiz bir isimdir – daha fazla işlev çağırabileceğiniz kimlik.

$ Source – Dosyanın URL kaynağını veya WordPress kök dizininize göreli komut dosyasına giden yolu girin. SRC, yukarıdaki örnekte olduğu gibi tek bir teklif işaretinde olmalıdır. ($ src = ”)
$ Bağımlılıklar – Yeni komut dosyalarınızı çalıştırmanın temeli olan daha önce kayıtlı komut dosyası tutamağını girin. Bu genellikle bir kütüphane.
$ Sürüm – Kendini Eksplanator, değil mi? Varsayılan değer yanlıştır.
$ in_footer – Varsayılan değer yanlıştır – yani komut dosyasını HTML kafanıza koyarsınız. Doğru, önüne koyacaktır.
İhtiyaçlarımıza göre $ sürüm ve $ in_footer varsayılan ayarlar, false eklemeyeceğiz. Bizim durumumuzda, kağıtlar kütüphanesine bağlı bir kağıt-örnek.js dosyası oluşturacağız.
Unutmayın, JQuery gibi WordPress’e dahil edilen birçok popüler kütüphane var. Sıralamanıza gerek yok, sadece bir bağımlılık olarak ekleyin. Adım 5: Paper-example.js komut dosyası ekleyin ve ilk bağımlılık olarak kağıt full.min.js ekleyin, dosya yöneticinizde yeni bir dosya oluşturalım. Paper-example.js adresini arayın ve kağıt-full.min.js depoladığınız yerde kaydedin. Konsol ekle Enqueed betiğinize bağımlılık eklemek için, sadece ‘Paperlibrary’ tutamağını diziye ekleyeceğiz. Bağımlılık olarak eklenecek daha fazla komut dosyası varsa, bunu sadece diziye ekleyerek tek bir satırda yapabiliriz.
Bu şimdi düzgün bir şekilde bağlanmalı, ancak yine de yapılması gereken iki ana şeyimiz var. Adım 6: Bir tuval yapın Kağıt betiğinin görüntüleneceği bir tuval yapmamız gerekiyor. Varsayılan olarak böyle görülmelidir:
Core 5FAB547E386D301A9BAC2FD377860D2D içerir
Canvas bir HTML5 öğesidir ve WP metin düzenleyicisine eklenemez. Bunu yapmanın en kolay yolu, özel kod yazmayı destekleyen bir sayfa üreticisi veya eklentisi kullanmanızdır. Tuval öğelerini sayfanıza, satıra veya div’e yerleştirebileceksiniz (Divi ve Siteorigin sayfasının üreticisi ile test ediyorum). Diğer HTML öğelerini düzenleyeceğiniz gibi tuvali CSS’de düzenleyebilirsiniz. Biraz belirgin hale getirmek için çocuğumun temasını style.css’e aşağıdaki kodu ekledim:
B5EF5A731507D8A119DECC4391FAF7F2’nin özünü içerir
Not: Sayfanızda birden fazla tuval yapabilirsiniz. Onlara farklı bir kimlik vermeyi unutmayın. Adım 7: Doğrudan JavaScript ile Paper.js’yi kullanarak herhangi bir kağıt komut dosyası için gösteri kodunu kağıt-engram.js olarak kopyalıyorsanız, “tanımlanmamış” hatalarla hayal kırıklığına uğrayabilirsiniz. Sana söylemek için buradayım, maalesef bekleniyor. Sorun şu ki, WordPress Paperscript’i desteklemiyor, yani üstesinden gelmemiz gerekiyor. Paper.js ile doğrudan JavaScript ile Paper.js kullanmalıyız. Bunu yapmak için, küresel bir kapsam oluşturmanız ve değişkenlerinizi tanımlamanız gerekir. Küresel Bir Kapsam Oluşturma Kağıt kapsamını, aşağıdaki kodda gösterildiği gibi pencereye enjekte ederek küresel hale getirebiliriz. Bu tüm sınıflara ve kağıt nesnelere erişir. Ayrıca, kağıt işlevini kullanarak kağıdın kapsamını tanımlamalıyız. Bizim için otomatik olarak bir sınıf oluşturacak kurulum (tuval). ECE2181B8C75541AF3250ae9bdd19c’nin çekirdeğini korumak
Onframe ve OnResize gibi işlemenin JavaScript’te çalışırken uygun nesneye manuel olarak yüklenmesi gerektiğini unutmayın. Doğru düzenlenmiş kağıt kapsamı ile tek yapmamız gereken bu tutamağı mevcut ekran nesnesine yüklemektir (örneğin = view.onframe). Bu öğretici uğruna, 2 yol ve bir araç içeren basit bir senaryo yaptım, böylece küresel kağıdın kapsamını nasıl yerleştireceğinizi ve içindeki değişkenleri nasıl tanımlayacağınızı görebilirsiniz. Bütün gün sağa dönen sarı dikdörtgen benim Path1 değişkenim ve ikinci yolu çizen turuncu çizgiyi çizen cihaz. Kodumu kağıt-example.js (veya dosya adınız ne olursa olsun) olarak kopyalayabilir ve oradan çalışmaya başlayabilirsiniz. Çekirdek 58428697f2e6b0b46e49f54c745b67f başlangıç
Yollarınızı, araçlarınızı, projelerinizi ve görüşlerinizi makalenizin kapsamında ayrı olarak tanımladığınızdan emin olun. Paperscript’te çalışırken bunu yapmanıza gerek yoktur, ancak bu doğrudan JavaScript’te çalışırken gereklidir. Paper.js ile eğlenin!
Hiç Paper.js ile çalıştınız mı? Hiç WordPress sitenizde kullandınız mı? Deneyiminizi bizimle paylaşın. Bilmek istiyoruz.
Etiket:
kuyruk komut dosyası
Javascript
Paper.js