TinyMCE Advanced eklentisi bir wordpress metin düzenleyicisidir. Görsel düzenleyici WordPress TinyMCE Advanced, açıklama ve ayarlar

Herkese selam!

Bugün size standart wordpress görsel düzenleyicisinin işlevlerini önemli ölçüde genişletmenizi sağlayan Ultimate tinyMCE eklentisinden bahsedeceğim.

Ultimate tinyMCE eklentisi ile uygun metin yazı tipini seçebilir, boyutunu belirleyebilir, görüntüleri ve videoları daha işlevsel bir şekilde işleyebilirsiniz.

Makaleyi yazarken çeşitli ifadeleri doğru yerlere koyun ve çok daha fazlasını yapın. Ekstra eklentilerin destekçisi olmasanız bile, bu durumda makale sizin için yararlı olacaktır çünkü. İçinde size bazı fonksiyonları normal kodlar kullanarak nasıl uygulayacağınızı göstereceğim.

Öyleyse başlayalım! WordPress motoru ile çalışan herkes, standart bir görsel düzenleyicinin çalışma panelinin nasıl göründüğünü çok iyi bilir:

O içerir asgari set web yöneticilerinin yazmasına ve yayınlamasına izin veren özellikler yararlı malzeme blogunuzda Şahsen, standart WordPress düzenleyici işlevlerinden oldukça memnunum, ancak herkes bundan memnun değil ve diğer düzenleyicileri veya programları kullanmayı tercih ediyor.

Nihai TinyMCE eklentisi. wordpress görsel editörü geliştirmek

Ultimate TinyMCE eklentisini indirebilirsiniz. Ardından, blogunuza kurun ve etkinleştirin. Eklentilerin nasıl kurulduğunu kim bilmez, . Eklentiyi kurup etkinleştirdikten sonra, kaynağınızın yönetim panelinde ek bir Ultimate TinyMCE sekmesi görünecektir:

Sekmeye gittiğinizde, her biri belirli bir işleve sahip olan farklı düğmelerin etkileyici bir listesini göreceksiniz. Artık eklentide bulunan eksik özelliklerden herhangi biriyle görsel düzenleyicinizi geliştirebilirsiniz.

Her düğmeyi açıklamayacağım çünkü. çoğu Rusçaya çevrildi ve her biriniz onlarla kendi başınıza ilgilenebileceksiniz. Bahsetmeye değer tek şey, blogdaki uygulamalarıdır.

Belirli bir düğmenin görüntülenmesi için çalışma paneli görsel düzenleyici, "Etkinleştir" sütununda yeterli, aksine istenen düğme onay kutusunu ayarlayın. Ek olarak eklenti, "Satır Seçimi" sütununda yapılabilecek düğmelerin konumunu kendiniz seçmenizi sağlar:

Muhtemelen fark ettiğiniz gibi, editör panelindeki tüm düğmeler iki satırda yer almaktadır, ancak Ultimate tinyMCE sayesinde satır sayısını dörde artırabilirsiniz, ancak daha fazla değil. Bu, çeviride "Hat" anlamına gelen "SATIR" değeri ile kolaylaştırılır.

Varsayılan olarak, her öğe "SATIR 1" olarak ayarlanmıştır. Her şeyi olduğu gibi bırakırsanız, düğme şeklindeki işlev görsel editör panelinin ilk satırında devam edecek ve tüm standart işlevlerden sonra en sonunda görüntülenecektir.

Listeden örneğin "ROW 3" değerini seçerseniz, işleve sahip düğme üçüncü satıra geçer. Anlaşılır olduğunu düşünüyorum! Her şey etkinleştiriliyor Ek fonksyonlar(53 saydım) ve onları çizgiler boyunca dağıttım, bu resmi aldım:

Etkileyici, değil mi? Ve herhangi bir işlev eklerken veya kaldırırken, ayarları kaydetmek için eklentinin en altındaki "Güncelleme Düğmeleri Seçenekleri" düğmesine basmayı unutmayın.

Wordpress görsel editörünün işlevselliğini kodla nasıl genişletebilirim?

Peki kod ile hangi özellikler eklenebilir ve nasıl yapılır?

1. Bir "Yazı Tipi Ailesi" ekleyebilirsiniz, örn. listeden ihtiyacınız olan yazı tipini seçebilir ve onunla tüm bir yazı veya kısa bir pasaj yazabilirsiniz. Bu işlevi uygulamak için, functions.php dosyasını düzenlemek üzere açın (dosyanın yolu: /wp-content/themes/theme (template) name/functions.php).

Dikkat: functions.php dosyasını düzenlemeden önce, hatalı işlemlerden kaçınmak için düzenlemeyi yaptığınızdan emin olun!

Dosyayı açtıktan sonra en sonunda etiketi bulun: ?> ve hemen önüne şu kodu yapıştırın:

Dosyayı kaydedin ve eskisini değiştirerek blog tema klasörünüze geri taşıyın.

2. Yatay ayırma düğmeleri, üst simge ve alt simge düğmeleri, yazı tipi boyutu, değişiklik stilleri ve arka plan rengi ekleyin. Bunu yapmak için, aynı functions.php dosyasında, aynı tag?>'den önce aşağıdaki kod bölümünü ekleyin:

Ardından dosyayı tekrar kaydedip eskisini değiştirerek sunucuya geri taşıyoruz. Sayfayı görsel editörle güncelliyoruz ve elimizde ne olduğunu görüyoruz:

Benim için hepsi bu kadar ve artık wordpress düzenleyiciye işlevsel düğmeleri nasıl ekleyeceğinizi de biliyorsunuz, böylece standart özelliklerini genişletiyorsunuz! Hepinize iyi şanslar dilerim! Hoşçakal ve yakında görüşürüz!

Makaleyi nasıl buldun? Belki de WordPress görsel düzenleyicisinin standart özelliklerini geliştirmek için başka seçenekler biliyorsunuzdur? Bunları bu gönderiye yorum olarak blog okuyucularıyla paylaşın.

Bir keresinde ilginç bir proje düşündüm - için görsel bir editör wordpress oluştur doğrudan yöneticiden şablon. Bugün benzer ama daha işlevsel ve güçlü bir üründen bahsedeceğim -. Bu, yanıt hızı, komut dosyaları, Önyükleme ve diğer özelliklere sahip web siteleri oluşturmak için kullanılan profesyonel bir masaüstü web düzenleyicisi olan Pinegrow'un bağımsız bir sürümüdür. Yani Pinegrow WP, WordPress şablonları oluşturmanıza izin veren özel bir eklentidir.

Pinegrow WP'nin temel özellikleri:

• Statik HTML Düzenlerini Şuna Dönüştürme WordPress temaları- şablonun belirli öğelerini seçin ve bunlar için uygun parametreleri seçin.
• Görsel düzenleyiciyi kullanarak sıfırdan WP şablonları oluşturma - sadece gerekli öğeleri sayfaya ekleyin (kenar çubuğu, gönderi listesi vb.)

• 175 WordPress etiketi desteği - hızlı bir şekilde bulmanızı sağlar HTML öğeleri istenen değerleri düzenleyin (yazı başlığı, tarih, yazar adı).
• Eklentiler ve PHP işlevleri için destek — öğe parametreleri olarak yalnızca WordPress etiketlerini seçmekle kalmaz, aynı zamanda değişkenleri ayarlayabilir, PHP işlevleri ekleyebilirsiniz.
• Canlı görüntü WordPress tarafından oluşturuldu temalar, ayarlarınızdan sonra ne olduğunu görmenizi sağlar.
• Düzen için oluşturulan PHP kodunu görüntüleyin.

Ek olarak, görüntüleri Pinegrow WP'ye aktararak WordPress sitenizin içeriğiyle doğrudan çalışabilirsiniz. Çıktıda saf PHP / HTML kodu alırsınız, hizmet herhangi bir ekleme yapmaz. ekstra elemanlar taban düzenine.

İşte Pinegrow WP'nin nasıl çalıştığına dair kısa bir video:

Bu yazılımı kendiniz test edebilirsiniz. Bunu yapmak için programı resmi web sitesinden indirin (Windows, Mac ve Linux sürümleri vardır). Kurulumdan sonra, ücretsiz bir geçici lisans anahtarı isteyin (7 gün boyunca). Maile gelen şifreyi girin ve sisteme girin.

index.html için ayarlarda (dişli simgesi) Çerçeve ve Eklenti Yöneticisi WordPress'i işaretleyin, ardından bazılarını yükleyin HTML Şablonu. Sonraki tıklayın belirli unsurlar düzeni seçin ve uygun olanı seçin WordPress Özellikleri. Örneğin: bir resim için — the_post_thumbnail, bir başlık için — the_title, bir tarih için — the_date, vb. Yani, kullanıcının bunu veya bu öğeyi WordPress'te tam olarak nasıl ayarlayacağını bilmesine gerek yoktur, sadece mevcut işlevlerde arayın ve düzene ekleyin. Sayfadaki tüm blokları uygun değere ayarlayarak, dışa aktarma için çalışan bir WordPress şablonuna sahip olacaksınız. Algoritma yaklaşık olarak aynıdır, ancak Pinegrow WP programıyla daha ayrıntılı olarak ilgilenmeniz gerekecek (birçok farklı işlevler ve ayarlar).

Genel olarak, Pinegrow WP çok güçlüdür, ancak ücretsiz değildir. Kişisel lisans (3 bilgisayar için) 99$'dır. Dilediğiniz kadar proje için kullanabilirsiniz! Şirketler ve geliştirme ekipleri için lisanslar vardır. Prensip olarak, programa bu amaçlar için ihtiyaç duyulur - siz veya şirketiniz profesyonel olarak sitelerin (WordPress dahil) oluşturulmasıyla uğraşıyorsa, o zaman bu yazılım kullanışlı olacaktır.

Herkese selam!. Bugün blog yazmak için çok fazla zaman harcayacağınız yer hakkında konuşacağız. Bu yer - ! Ne de olsa, yeni yazılar yazacak ve blogunuzda yayınlayacaksınız. WordPress, düzenleyicinin iki sürümünü sunar - görsel ve metin. Her birinin özelliklerini göz önünde bulundurun ve nasıl yeni işlevler ekleyeceğinizi öğrenin.

WordPress Görsel Düzenleyici ve Ultimate TinyMCE Eklentisi

Görsel wordpress editörü görünüş olarak benzer ve Kelime işlevleri neredeyse herkesin aşina olduğu. Ne yazık ki, işlevselliği varsayılan olarak çok sınırlıdır ve bu da metin biçimlendirme seçeneklerinizi büyük ölçüde sınırlar. Bu sorun Ultimate TinyMCE eklentisi, her türden çok sayıda yeni düğme ekleme konusunda mükemmel bir iş çıkarıyor.

Eklenti standart olarak yüklenir - Ultimate TinyMCE'yi indirin, arşivi açın ve eklenti dosyalarını içeren klasörü wp-content/plugins dizinindeki sunucuya yükleyin. Etkinleştirin ve "Seçenekler" - "Ultimate TinyMCE" bölümündeki ayarlarına gidin.

Varsayılan olarak, WordPress görsel düzenleyicisindeki tüm düğmeler iki sıra halinde düzenlenmiştir. İkinci satırı görüntülemek için Göster/Gizle düğmesini kullanın. ek panel". Her düğmenin işlevselliğini, üzerindeki simgeden veya fare imleciyle üzerine geldiğinizde görünen araç ipucundan tahmin edebilirsiniz. Ultimate TinyMCE, yaklaşık 40 yeni özellik ve fazladan iki sıra düğme ekler.

Aslında, tüm Ultimate TinyMCE ayarları, işlevselliğine ihtiyacınız olan düğmeleri işaretlemeye ve onlar için bir satır seçmeye gelir. ayarlarda açıklama ingilizce dili, ancak bunları editöre ekledikten sonra ipuçları Rusça olacaktır. Her ne kadar çoğu durumda bunu herhangi bir soru sormadan çözebilirsiniz.

Sadece düşünün ekstra seçenekler, ayarların en altında sunulanlar:

Düzenleyicinin rengini değiştirme— WordPress görsel düzenleyicisindeki düğme bloğunun rengini değiştirir.

Sonraki Sayfa (PageBreak) Düğmesini Etkinleştir- İçin Sonraki Sayfa işlevini ekler.

Sayfa/yazı yönetici listesine Kimlik Sütunu ekleyin- WP yönetici sayfasına, her blog gönderisinin / sayfasının kimliğini gösteren tüm makalelerin ve gönderilerin listelerini içeren yeni bir sütun eklenir. Okuyabilirsin .

Widget metin alanlarında kısa kod kullanımına izin ver- "Metin" widget'ında bir "kısa kod" kullanmanıza izin verir. Kısa kod (kısa kod) şu amaçlarla tasarlanmıştır: hızlı ekle kod, SonrakiGEN Galerisi ve diğer eklentileri sayfanın metnine ekleyin.

PHP Metin Widget'ını Kullan - kullanmanıza izin verir php kodu V. Kod yorumlanır ve çalışmasının sonucu blog sayfasında görüntülenir.

Satır Sonu Kısa Kodunu Etkinleştir - metne boş bir satır eklemek için tasarlanmış olan Kısa Kodlara Break etiketini ekler.

Sütun Kısa Kodlarını Etkinleştir - "Kısa Kodlar"a ekler çok sayıda metin sütunlarının oluşumundan sorumlu etiketler.

Gelişmiş Bağlantı Ekle/Düzenle Düğmesini Etkinleştir- bağlantı eklemek / düzenlemek için gelişmiş bir yetenek ekler.

"Div Clear" Düğmelerini Etkinleştir - float özelliği kullanılarak ayarlanan öğenin kaydırılmasını iptal etmek için tasarlanmış hem sol hem de sağ düğmeleri Div Clear ekler.

p ve br etiketlerini kaldır - devre dışı bırakır otomatik ekleme p (paragraf) ve br (satır besleme) etiketleri. Her paragraf için p etiketini manuel olarak belirtmek istemiyorsanız, bu seçeneğe dokunmamak daha iyidir.

Oturum Kapatma Kısa Kodu Ekleme - sık kullanılan bir ifadeyi ayarlayabilir ve Kısa Kodlardan Oturum Kapatma etiketini kullanarak makalelere ekleyebilirsiniz.

WordPress metin düzenleyicisi ve eklentileri Yazı Düzenleyici Düğmeleri ve AddQuicktag

Birçok kişi, WordPress görsel düzenleyicisinde oluşturulan kodun kirli olduğunu düşünür, yani gereksiz etiketler ve stiller içerir ve bunlar iyi bir şekilde kullanılan WP temasının stil dosyasına yerleştirilmelidir. WordPress düzenleyicisinin metin sürümü, kod üzerinde size daha fazla güç verir. Orada, paragraf (p) ve satır besleme (br) etiketleri dışında tüm etiketler manuel olarak eklenir, bunlar otomatik olarak eklenir.

Her şey güzel ama yine yeterli işlevsellik yok. Bu sorunla başa çıkmak için Post Editor Buttons eklentisini kullanabilirsiniz.

Yayın Düzenleyici Düğmelerinin en son sürümünü indirin. Eklenti varsayılan olarak yüklenir. Eklenti ayarları, "Parametreler" - "Yazı Düzenleyici Düğmeleri" adresinde bulunur.

Orada her şey çok basit:

• Başlık - eklediğimiz düğmenin adı;
• Önce - açılış etiketi;
• After kapanış etiketidir;
• Sil - sil.

Üzgünüm, blogumda Yazı Düzenleyici Düğmeleri Çalışmıyor. İçinde oluşturulan düğmeler basitçe eklenmez. harika bir alternatif olmuş AddQuicktag eklentisi.

AddQuicktag'in en son sürümünü indirin. Eklenti standart olarak yüklenir, ayarları aynı adı taşıyan "Parametreler" bölümünde bulunur - "AddQuicktag". Kullanmadığım dört yeni seçenek sütunu eklendi.

Ana olanlar aynıdır:

• Düğme Etiketi - ad;
• Başlangıç ​​Etiketleri - açılış etiketi;
• Bitiş Etiketleri (ler) - kapanış etiketi.

İlginiz için teşekkür ederiz! Bu kadar. Kendine dikkat et.

Bu kılavuz eksiksizdir, ancak henüz yayınlanmamış materyallere bağlantılar içerir. Bağlantılardan herhangi biri açılmazsa lütfen korkmayın. Her şey yakında çalışacak! 🙂

Saygılarımla, İskender.

Görsel düzenleyici en uygun ve hızlı yol sitede materyallerin yayınlanması. Gönderiler ve sayfalar oluştururken kullanılır, bazı eklentiler de ayarlarında kullanır.

Editörün görsel ve metin modunun olanaklarını notta kısaca gözden geçirdik ve şimdi biraz daha derine inip ana butonların üzerinden geçelim.

WordPress'i yükledikten sonra editör çok zayıf görünecek ve işlevsel olmayacaktır:

Affedersiniz, ancak zaten uzun olan makaleleri uzatmamak için bazı resimleri kasıtlı olarak kırpacağım. Görüntünün alt kısmında keskin bir kırılma görürseniz, orada yararlı bir şey olmadığı anlamına gelir. bazılarında özel durumlar buna dikkat edeceğim.

Genel olarak gördüğünüz gibi editör istediğimiz kadar buton sunmuyor. Ancak bunlar bile malzemeler üzerinde etkili bir şekilde çalışmak için yeterlidir.

Temel biçimlendirme için ihtiyacınız olan her şey burada:

• Kalın, italik ve üstü çizili metin seçimi
• Madde işaretli ve numaralı listeler
• Metni süslemeli bir alıntı olarak vurgulayın
• yatay bölme çizgisi
• Metni sola, ortaya ve sağa hizalayın
• Bağlantı ekleme ve silme
• Sayfa Sonu Düğmesi
• Ek özellikleri etkinleştirmek için düğme
• Tam ekran düğmesi

Bu düğmeler iki modda çalışır, ikisini de düşünün.

örnek 1

Bu yöntemin nasıl çalıştığını anlamak çok basit: araç çubuğunda ihtiyacınız olan tasarıma tıklayın ve yazmaya başlayın. Düğmeye görsel olarak basılır ve basılmış gibi görünür.

Bu modda girilecek herhangi bir metin, araç çubuğunda etkin olan tasarım seçeneğini otomatik olarak alacaktır.

Bir göz at:

[B] tuşuna basmadan ilk iki cümleyi yazıp Enter'a bastım. Düzenleyicide, girmeden önce kalın stil düğmesine tıkladığım ve metni girmeye başladığım yeni bir boş paragraf oluştu.

Yazdığım her şey otomatik olarak kalın hale geldi. Bu stilin uygulanmasını devre dışı bırakmak için düğmeyi bırakmak yeterlidir ve ardından sonraki karakterler zaten dekorasyonsuz olacaktır.

Diğer tüm tasarım seçenekleri aynı şekilde çalışır.

Örnek 2

(Kişisel görüşüme göre) daha uygun ve daha hızlı olan başka bir yol var. Şundan oluşur: önce tasarımı olmayan bir metin sayfası yazarsınız ve ardından metninizi istediğiniz gibi tasarlarsınız.

İlk önce basitçe yazabileceğim aynı metin:

Ardından, kalın yapmak istediğim paragrafı seçmeniz ve araç çubuğundaki ilgili düğmeyi tıklamanız gerekir:

Bundan sonra paragrafımız kalınlaşacaktır. Bunun için [B] düğmesine basmanız gerekmez - tasarım seçilen tüm metne otomatik olarak uygulanacaktır.

Örnek 3

WordPress, tıpkı Microsoft Word, fareyle değil, klavye kısayollarıyla çeşitli eylemler gerçekleştirmenize olanak tanır. Her eylemin, hangi belirli stillerin uygulandığına basarak kendi düğmeleri vardır.

Örneğin, bu talimatın ikinci örneğinde araç çubuğundaki [B] düğmesine basmadık, ancak "Ctrl" ve "B" kombinasyonunu kullandık (Ctrl + B olarak yazılır, "B" düğmesi İngilizce'dir, “Kalın” kelimesinden), kalın seçim hemen paragrafımıza uygulanacaktır.

Bu kılavuzun sonunda klavye kısayolları hakkında materyal bulunacaktır.

Ek düğmeleri etkinleştirme

Bir noktada, editörün mevcut yeteneklerine sahip olmadığınızı fark edeceksiniz ve metni altı çizili bir stille vurgulamak veya metinde başlıklar ayarlamak isteyeceksiniz. Bunu yapmak için ek bir araç çubuğunu etkinleştirmeniz gerekir.

Bu düğmeyi bulun:

Düzenleyicinize yeni özellikler ekleyen ikinci bir düğme sırası görünecektir:

Burada zaten gözlemleyebiliriz ekstra seçenekler metni biçimlendirmek için soldan sağa doğru inceleyelim:

• Mevcut altı seviyeden herhangi birinin başlıklarını oluşturun
• Metin altı çizili
• Metni sayfa genişliğine hizala
• Metin rengini ayarla
• Biçimlendirmeden panodan metin yapıştırma modunu etkinleştirin
• Seçilen bir metin parçasının biçimlendirmesini temizleme
• Özel karakterler ekleme
• Paragrafların soluna girintileri kaldırma ve ekleme
• Önceki bir eylemi geri alma veya yineleme
• Düzenleyici için yardım

Gördüğünüz gibi, bu olanaklar metin ve tasarımı üzerinde çalışmak için gerçekten yeterli.

Blog sitesine hoşgeldiniz. Bu yazıda size nasıl değiştirebileceğinizi ve aynı zamanda standardı nasıl düzeltebileceğinizi anlatacağım. Görsel WordPress Yazı Düzenleyici. Öyleyse standartla başlayalım Metin düzelticiözünde, her birimizin kullandığı olağan Word'den başka bir şey değil, ancak yalnızca çok basitleştirilmiş bir biçimde. Birçoğunun, gönderilerini süslemek için yalnızca birkaç düğme varken makaleler yazması elverişsizdir ve bu nedenle çoğu, kodda ne istediklerini yazmak için çalışmaya başlar, ancak burada onları bir yakalama beklemektedir.

HTML düzenleyici, bilinen tüm etiketleri değil, yalnızca ana etiketleri kullanmanıza izin verir. Bu arada, WordPress editörünün anladığı etiketlerin bir listesi: address, a, abbr, akronim, alan, makale, kenara, b, big, blockquote, br, caption, cite, class, code, col, del , Ayrıntılar, dd, div, dl, dt, em, Rakam, şekil yazısı, altbilgi, yazı tipi, h1, h2, h3, h4, h5, h6, Üstbilgi, Hgroup, hr, ben, img, ins, kbd, li, harita , ol, p, pre, q, s, section, küçük, yayılma, vuruş, güçlü, alt, özet, sup, tablo, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

Bu listede yer almayan başka bir etiket girmeye çalışırsanız, WordPress düzenleyicisi onu gönderiden kaldıracaktır. Ayrıca html editörü PHP ve JavaScript kodu kullanılamaz. Eğer hala kıpırdamak istiyorsan JavaScript kodu olmak için, o zaman yapmalısın ayrı dosya bu kodu yapıştırın, ardından bloga yükleyin ve html düzenleyiciye bu dosyayı açma yolunu yazın.

Bütün bunlar, birçok insanın karşılayabileceğinden çok daha fazla zaman harcamayı külfetli hale getiriyor. Bu nedenle, çoğu, standart WordPres görsel düzenleyicisini ihtiyaçlarına ve hedeflerine uygun şekilde nasıl değiştireceklerini arıyor. Bugün tam olarak bunun hakkında konuşacağız.

Düzenleyicinin adı TinyMCE Advanced olup, CKEditor eklentisi. Aynen öyle söylemedim çünkü içine 15 kadar eklenti yerleştirilmişti: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Aramak ve Değiştir, Stil, Tablo, Görsel Karakterler ve XHTML Ekstraları.

Bu, genel olarak var olan açık ara en gelişmiş metin düzenleyicisidir. Genel olarak, eklentinin ücretli olduğu ortaya çıkıyor, ancak nedense tamamen ücretsiz olarak dağıtılıyor. Geliştiriciler, sadece tanışmak için ücretsiz olarak kullanabileceğinizi, ancak ticari siteler için bir lisans satın almanız gerektiğini söylüyorlar.

Bunun başka bir şey olduğunu düşünmeme rağmen. Eklentinin kendisi çok ağırdır ve herkesin yalnızca denizlerin olduğu belirli işlevlere, düğmelere ihtiyacı yoktur, bu nedenle eklenti yalnızca ihtiyacınız olanı bırakarak kendiniz için monte edilebilir, böylece blogu yavaşlatmadan boyutunu küçültür.