Bir joomla makalesinin başlığına simgeler ekleme. Joomla'da içerik düzenleme - yönetici panelinde makaleleri silme ve oluşturma, ayrıca tüm materyaller için parametreleri ayarlama

Bu öğretici, Joomla'daki menü öğeleri için metin yerine resimlerin nasıl kullanılacağını gösterecektir.

Menüye simgeler eklemenin birkaç yolu vardır:

Menü Yöneticisini kullanarak menülere resim ekleme

Standart Joomla modülü menü ile çalışmak, menü öğelerinin adlarını resimlerle değiştirmenize izin verecektir:

CSS Kodunu Kullanarak Görüntü Ekleme

İkinci yol, bir sınıf eklemeye dayanır. css görselleri bir dosyaya (burada ### şablon numaranızdır). IceMegaMenu modülü gibi bazı Joomla menü modülleri, yönetici panelinde bir menü öğesi için resim eklemenize izin vermez. Css kodunu kullanarak resim ekleyebilirsiniz:

Arka plan resmini css kodunda kullanma:




1. FontAwesome simgelerini kullanma:

   1. Özel css sınıfını bulmak için Geliştirici Aracını kullanarak sitenizi keşfedin.

      Dosyada değişiklik yapma şablonlar/tema###/css/templates.css(burada ###, desen numaranızdır).

      Dosyaya eklenecek CSS kodu genellikle şöyle görünür:

      #iceMenu_101 .iceMenuTitle:before ( font-family: FontAwesome !important; içerik: "###" !important; font-size: 45px !important; top: 20px !important; konum: göreli !important; display: satır içi blok !important; satır yüksekliği: 45px !important; yükseklik: 90px !important; ) #iceMenu_101 .iceMenuTitle ( font:0/0 a !important; )

      ###, FontAwesome simge sınıfıdır. Kullanılabilir simgelerin bir listesi FontAwesome web sitesinde bulunabilir.

      Değişiklikler için sitenizi kontrol edin.

Artık Joomla'daki menü öğelerinde metin yerine resimleri nasıl kullanacağınızı biliyorsunuz.

Joomla sitenizin ek tanımlaması, benzersiz bir simge veya site simgesi olabilir. Joomla sitesindeki Favicon, sitenizin tüm sayfalarıyla birlikte yapılan tarayıcılarda sekmelerin başlığına ve yer imlerine yansıtılacaktır. Varsayılan olarak, CMS Joomla tarafından yönetilen tüm siteler aynı standart simgelere sahiptir. Yalnızca Joomla sitesinin görünen kısmı için simge ve yönetim paneli. Sitede ziyaretçilerin gördüğü kısım için ikon kolaylıkla değiştirilebilir.

Joomla sitesinin simgesini (favicon) değiştirmem gerekiyor mu?

Site simgenizi değiştirmek, site optimizasyonunun yalnızca öznel bileşenini etkiler. Sitenin bir sayfasına yer işareti koyan bir ziyaretçi, daha sonra onu tüm yer işaretleri listesinde kolayca bulabilir. Ayrıca site simgesi arama ve uygulama araçlarına da yansır. örneğin, Yandex Webmaster'daki siteler listesinde.

Ayrıca değiştirerek standart simge Joomla, sitenizin Joomla tarafından yönetildiğine dair reklam yapmayı bırakacaksınız ve bu, sitenin güvenliğini artırma adımlarından biridir.

Yeni Joomla simgesi için gereksinimler

Favicon kelimesi iki İngilizce kelimenin kısaltmasıdır, favoriler ve simge . Joomla simgelerinin kendi standartları vardır. Boyutları 16x16 veya 32x32 piksel olmalıdır. Yapılan favicon , 256 renkte olmalıdır. Ve en önemlisi, Joomla ikon formatı favicon .ico olmalıdır.

Bir Joomla sitesinin faviconunu değiştirme adımları

Joomla site simgesinin değiştirilmesi birkaç basit adımda yapılır:

• Herhangi bir PNG veya JPEG fotoğrafından benzersiz bir simge oluşturun. Veya çevrimiçi hizmetleri veya fotoğraf programlarını kullanarak kendiniz bir simge çizin;
• Görüntüden ico formatında, 16(32)×16(32) px boyutunda bir favicon yapın;
• Tüm eski favicon'u silerken site dizinine yeni bir simge yükleyin;
• Sokmak özel kodşablona ana sayfa senin siten.

Her adımı ayrıntılı olarak analiz edelim.

Adım 1. Joomla sitesi için bir simge oluşturma

Herhangi bir fotoğraftan bir favicon .ico simgesi oluşturmak için İnternette birçok çevrimiçi araç vardır. Burada aşağıdakilere dikkat etmeniz gerekiyor.

Favicon'unuzun onsuz olmasını istiyorsanız Beyaz arkaplan, o zaman kaynağı şuradan olmalıdır: şeffaf arka plan oluşturma ve biçimlendirme sırasında PNG kaydedilirken. PNG dışındaki fotoğraf formatlarını kullandığınızda, arka planı beyaz veya siyah olan bir Favicon elde edersiniz. Harika simge havuzlarını web'de şu adreste bulabilirsiniz: üst menüşu noktada bu sitenin: Web Yöneticisi Araçları.

Ayrıca arama kutusuna favicon generator yazarak favicon oluşturucuları kendiniz de bulabilirsiniz.Burada simge oluşturucuların adreslerini vereceğim.

1. pr-cy.ru/favicon
2. tools.dynamicdrive.com/favicon

• ikonfinder.com
• freepik.com/free-icons
• jenerikons.com
• flaticons.net
• ikonbird.com
• ikonizer.net
• webhostinghub.com
• simgelerpedia.com
• simge arama.ru
• simgeler8.com
• glyphicons.com
• findicons.com
• icomoon.io
• ikonarşiv.com
• temalaştır.me
• thenounproject.com
• düzicon.com

Favicon simgeleri aşağıdaki gibi yapılır

• Gelecekteki simgeniz için orijinal resmi önceden bulun;
• Jeneratörü açın;
• Jeneratör yükleyici penceresinde bilgisayardaki simgenizi seçin. Joomla 16×16 piksel için gelecek simgesinin boyutunu seçin;
• "Yap" gibi bir düğmeye basın.
• Favicon saniyeler içinde oluşturulur. Sonra sadece bilgisayarınıza indirmek için kalır. Bunu yapmak için "İndir" düğmesi vardır Bilgisayardaki simgeyi dizine yüklemeniz gerekir.

2. Adım. Web sitesi dizinine yeni bir simge yükleyin

Site dizininde sitenin yeni ikonunu (favicon) yüklemeniz gereken yer ile durum aşağıdaki gibidir.

Önceden, favicon .ico'yu yerleştirmek için zorunlu yer sitenin kök diziniydi. Şimdi durum biraz yumuşadı. Dinamik şablonları kullanmak, sitenizdeki herhangi bir dizine bir simge yüklemenize olanak tanır, yalnızca kodda (aşağıda) bu dizine giden yolu açıkça belirtmeniz gerekir. Ancak aynı zamanda, simge site kökünden ne kadar uzaktaysa, tarayıcıya yüklenmesinin o kadar uzun süreceğini hatırlamanız gerekir. Ve siteyi yükleme hızı için küçük şeylerde bile savaşmanız gerekiyor.

class="eliadunit">

Bu nedenle, ana favicon'u Joomla sitesinin kök dizinine yüklemenizi tavsiye ederim. İndirmek için, barındırma üzerindeki yönetim panelinde bir FTP istemcisine veya yetkilendirmeye ihtiyacınız vardır. Yeni bir simge (favicon ) yüklemeden önce, tüm site klasörlerini kontrol edin ve yüklediğiniz şablonlara yüklenmiş olabilecek eski favicon'ları kaldırın veya yeniden adlandırın. Klasörü şablonunuzla ayrı ayrı kontrol edin. Favicon.ico dosyasını şablon alt klasörlerinden kaldırın. Eski faviconları kaldırdıktan sonra yenisini sitenin kök dizinine yükleyin. Site dizinindeki favicon, kodu sitenin ana sayfasının şablonuna eklemek için kalır.

Not: Bu aşamada site ikonu çoktan değişmiş olabilir. Bazı şablonlarda, simgeyi görüntüleme kodu (aşağıdaki kod hakkında) site şablonunda zaten yazılmıştır ve bu nedenle, katalogdaki simgeyi değiştirirken tarayıcı sekmesinde de değişebilir. Bunu görmek için sitenin önbelleğini temizlemeniz ve belki de tarayıcıyı yeniden başlatmanız gerekir.

3. Adım. Favicon simgesini görüntülemek için kodu site şablonuna yapıştırın

Not: Bu yöntem kullanımdan kaldırılmıştır, büyük tarayıcılarda bu kod yapıştırılmadan yeni simge görüntülenir. Tüm eski favicon'ları site kökünden ve şablondan kaldırmak yeterlidir. ve ayrıca tarayıcının ve sitenin önbelleğini temizleyin.

Kod (aşağıda) Joomla ana sayfa şablonuna etiketler arasına eklenir (örnek aşağıda). İnternette Joomla siteleri için kodlar (favicon) için çeşitli seçenekler bulabilirsiniz. Sadece tüm Joomla sitelerimde çalışan kodlara bir örnek vereceğim.

kod bir. Simge, sitenin önbelleğini temizledikten sonra neredeyse anında görünür.

kod iki. Form elemanının türü (type) tarayıcıda gösterilmediği için bu simge 1-2 gün içinde tarayıcıda görünür.

Kod üç. Kök dizinde olmayan bir simge (favicon) için (patch-to, favicon klasörünün yoludur).

• Kodlar bu yazım KISAYOL SİMGESİ ve bu kısayol simgesiyle çalışır
• Sitenizin kodu XHTML değil HTML ise, kodu "/>" ile değil ">" ile bitirmeniz gerekir.

Simgeyi IE tarayıcısında görüntülemeniz gerekiyorsa, bu kodu eklemeyi deneyin:

Kodu şablona ekledikten sonra kaydetmeyi unutmayın, sitenin önbelleğini de temizleyin.

• Yönetici Paneli >>>Site >>>Bakım >>>Tüm önbelleği temizle (Joomla sürümleri 1.7-2.5-3.x için)
• Yönetici paneli >>>Araçlar >>>Tüm önbelleği temizle (sürüm 1.5 için)

Site simgesini görüntülemek için yapıştırılan kodun bir örneği:

Bu eğitim size eksik simgeleri nasıl ekleyeceğinizi gösterecektir. FontAwesome bir Joomla 3.x şablonuna.

Sitenizde bazı simgeler eksik olabilir. Bu muhtemelen serbest bırakıldıysa yeni bir versiyon FontAwesome yazı tipi veya tasarımcı yalnızca şablonun demo sürümünde kullanılan simgeleri eklediyse.

Bir FTP istemcisi kullanarak sunucuya bağlanın veya barındırma kontrol panelinin (cPanel) Dosya Yöneticisini açın. dosya yöneticisi) ve dosyayı bulun şablonlar/themeXXX/css/template.css.

Template.css dosyasında FontAwesome simge kodlarının sonuncusunu bulun. Ondan sonra, fa-yorum simgesi gibi yeni simgeler eklemeniz gerekir:



şimdi dosyayı aç şablonlar/themeXXX/less /font-awesome/font-awesome.css, açtığınız dosyada template.css dosyasından ikon listesinin son elemanını bulun. Bu simgenin altındaki tüm kodu kopyalayın (bizim durumumuzda fa-yorumlar) ve bu kodu template.css dosyasının sonuna yapıştırın.

Değişikliklerinizi kaydedin. Artık sitenizde simgelerin görüntülendiğini görebilirsiniz:



Herhangi bir nedenle font-awesome.css dosyasının şablonunuzda bulunmaması durumunda, dosyayı FontAwesome Resmi Web Sitesinde açın ve dosyadaki kodu kopyalayın maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css template.css dosyasının sonuna kadar.

/ 2008-09 Joomla! Topluluk Dergisi

Bu makalede, size Joomla!'daki bir makalenin başlığına özel bir resim eklemenizi sağlayacak Menü Türüne yeni bir parametre eklemenin kolay bir yolunu göstereceğim. alan. Bu method belirli bir menü veya modülle ilişkili içeriği özelleştirmek için "Sayfa Sınıfı Soneki" ve "Modül Sınıfı Soneki" kullanmaya benzer. "Sayfa Sınıfı Soneki" yerine aşağıda açıklanan yöntemi seçtim çünkü sonek belirli bir parametreyi değil, ilgili sayfa öğelerini etkiliyor. Şöyle basit örnek Ben sadece sayfadaki bir öğeye bir parametre eklemek istiyorum - Makale Başlığı.

1. Öncelikle örnek için verileri oluşturalım.

Süreçte kullanmak için örnek veriler oluşturalım:

"Makaleler" adlı bir "Bölüm" oluşturun. Ardından, üç Kategori oluşturun. Bu kategoriler için, kategorideki her makaleye uygun bir resim ekleyerek kullanılabilirliği artıracağız.

Ardından, her kategoride örnek içeriğe sahip dört metin makalesi oluşturun. Bunun için Mass Content uzantısını kullanmanızı öneririm.

2. XML "Menü Türü"ne yeni bir parametre ekleyin

Joomla!'nızın kök dizinine gidin. ve bu yola göre "tmpl" klasörünü takip edin - componentler/com_content/views/category/tmpl.

blog.xml dosyasını açın ve aşağıdaki parametreyi etiketli satırın hemen sonrasına ekleyin . default.xml dosyası için de aynısını yapın.

description="Ayrı kategori makale başlığı stili için bir sınıf soneki ekler"/>

Önemli Not: Bu örnekte "description" parametresi yeni bir satırda başlıyor. Bir xml dosyasına kod girerken, tüm kodun herhangi bir satır sonu olmadan tek bir satırda olduğundan emin olun.

3. Özel bir şablon oluşturun (Şablon Geçersiz Kılmalar)

Joomla'da! 1.5, varsayılan olarak çekirdekte sağlanan varsayılan içerik çıktısı şablonlarını değiştirmek için kendi şablonlarımızı oluşturma konusunda harika bir yeteneğe sahibiz. Özel şablonlar (Şablon Geçersiz Kılmalar) çok kullanışlıdır ve kullanımı kolaydır. Öncelikle ana bileşenlerden işaretleme dosyalarını şablon klasörümüzdeki "html" klasörüne kopyalıyoruz. Ardından, değişiklikler yapıyoruz. Joomla! templates/yourtemplate/html/ klasörünüzdeki özel biçimlendirme dosyalarını bulur, dosyalarınızı kullanır ve çekirdekteki biçimlendirme dosyalarını "yok sayar".

Bunu yapmak için /templates/yourtemplate/package konumuna gidin. Yeni bir paket oluşturun ve "html" olarak adlandırın. Html klasöründe yeni bir dizin oluşturun ve "com_content" olarak adlandırın. Şablonunuzda zaten "html" veya "com_content" dizinleri varsa, şanslısınız ve bunları oluşturmanıza gerek yok.

"com_content" klasöründe iki klasör oluşturun; birini "makale" ve diğerini "kategori" olarak adlandırın.

Örneğin:

/templates/rhuk_milkyway/html/com_content/category /templates/rhuk_milkyway/html/com_content/article

Şimdi çekirdekteki işaretleme dosyalarını kopyalayın (taşımayın!!!) - componentler/com_content/views/category/tmpl/blog_item.php dosyasını /templates/your_template/html/com_content/category konumuna kopyalayın

Not: bu dosya zaten varsa, üzerine yazmamak en iyisidir. Mevcut dosyayı kullanarak örnekteki adımlarla devam edebilirsiniz.

Yine component/com_content/views/article/tmpl/default.php dosyasını /templates/your_template/html/com_content/article konumuna kopyalayın (taşımayın!!!)

İşaretleme dosyasındaki simgeleri görüntülemek için tasarım öğeleri ekleme

Düzenlemek için /templates/your_template/html/com_content/category/blog_item.php dosyasını açın.

item->params->get("pageclass_sfx"); ?>" genişlik="100%">

item->params->get('link_titles') && $this->item->readmore_link != "") : ?>

item->readmore_link; ?>"

makale->readmore_link; ?>"

escape($this->makale->başlık); ?>

params->get('icon_suffix'); ?>»>

escape($this->makale->başlık); ?>

4. CSS Stilleri ve Görselleri Ekleme

Tamam, Joomla şablonunun temel öğelerini hazırladık ve şimdi bu dersin tasarım kısmına geçelim.

Yapmamız gereken ilk şey, yukarıda belirtilen kategoriler (SSS, Medya, Kitaplar) için simgeler seçmek. Bunu yapmak için ipek simge setindeki simgeleri kullanabilirsiniz , bunlar zaten istenen boyuta (16 piksel), şeffaf PNG-32 dosyalarına sahiptir ve tabii ki ücretsizdir.

Aşağıdaki üçünü seçtim. Bu resimleri kopyalayabilir ve /templates/your_template/images klasörüne yerleştirebilirsiniz.

Şimdi ana şablon CSS dosyanızı (genellikle template.css) /templates/yourtemplate/css/template.css dosyasını açın ve aşağıdaki CSS kodunu ekleyin:

arka plan: url(../images/info.png) tekrarsız 0px 5px;

arka plan: url(../images/photo.png) tekrarsız 0px 5px;

arka plan: url(../images/book_open.png) tekrarsız 0px 5px;

Menü öğesine stil atama (Menü Öğesi)

Yukarıdaki kodda, gerekli sınıfların (örn. SSS, medya, kitap) adlarını görebiliriz. Bunlar, artık menü yöneticisine girmek için kullanabileceğiniz seçeneklerdir.

Bunu yapmak için önce Joomla! ve içerik çıktısı olarak "Blog - Kategori İçeriği"ni kullanarak yeni bir Menü Öğesi oluşturun.

Sağdaki menü öğesi seçeneklerinde, göreceğiniz "Gelişmiş" sekmesini göreceksiniz. yeni parametre, "Makale Simgesi Sınıfı" olarak adlandırılmıştır. Bu alana üç değerden birini girebilirsiniz: sss, medya veya kitap. Yeni menü öğenizi kaydettikten sonra, Joomla! site ve yeni bir menü öğesi seçin. Makaleye "ulaşır ulaşmaz", başlığı bir simgeyle görüntülemek için yeni bir seçenek göreceksiniz.

eğer değiştirmek istersen mevcut ayarlar veya daha fazlasını ekleyin, tek yapmanız gereken eklemek yeni sınıf Yukarıdaki örnekte gösterildiği gibi CSS. Umarım şablonlarınızda bu yöntemi kullanırsınız. Joomla'nın tadını çıkarın!

Bu yazıda, Joomla site menü öğelerine yalnızca başlığın değil, yanında bu menü öğesini simgeleyen bir simgenin de görüntülenmesi için simgelerin nasıl ekleneceğine bakacağız. Protostar şablonuyla çalıştığımı hatırlatmama izin verin. Ve bu makalenin malzemesi, bu belirli şablonun stillerini etkiler. Ancak farklı bir şablon kullanılırsa aşağıdaki tarifin işe yaramayacağı da bir gerçek değil. ;)

Sorunun formülasyonu

Yani, zaten sahip olduğumuz sitenin ana menüsüne sahibiz. site başlığına taşındı ve hatta ona verdi yatay düzenleme. Şuna benziyor:

Genel olarak standart menü. Ama içinde bireysellik yok, ama gerçekten istiyorum. =)

Bu nedenle, diğer sitelerde adlarının yanındaki menü öğelerine simgeler eklemenin mümkün olduğunu gördükten sonra, bunu sitemizde de yapacağız.

Menü yöneticisi. Menü seçeneği. Bağlantı Seçenekleri Sekmesi

değiştirmek için dış görünüş menü öğemiz, Joomla yönetici paneline ve özellikle " sekmesine ihtiyacımız var. Bağlantı Seçenekleri", içinde mevcut olan " Menü Yöneticisi» düzenlerken veya menü öğesi oluşturma. Resimde gösterildiği gibi "" alanı ile çalışacağız:

1. Menü öğesinde adının önüne görmek istediğimiz simgenin adını alana girin, örneğin simge kullanıcıları
2. Hemen alana bir boşluk koyun " Menü Başlığı» (simgenin menü öğesinin adıyla birleşmemesi için)
3. Değişiklikleri kaydedin ve ne olduğunu görün

Menü öğesinin başlığı aşağı doğru kayar (yatay değil dikey olarak bulunur)

Ortaya çıkan sonucu görüntülerken, her şey iç karartıcı görünüyor. Menü öğesinde simge görünmesine rağmen, menü öğesinin adı aşağı doğru sürünerek, her seferinde bir harf dikey bir düzenlemede uzanıyordu:

Durumu düzeltiyoruz. Menü öğesini yatay bir görünüme getiriyoruz.

Protostar şablonunun yaratıcılarına neyin rehberlik ettiğini ve neden böyle bir pervazın ortaya çıktığını hala anlamıyorum. Açık olan bir şey var: menü öğesinin görüntüleme özelliği block olarak ayarlanmıştır, böylece her karakteri bloke eder ve çıktı olarak alt alta istifler. Ve bunları bir satıra yaymamız gerekiyor, bu da display özelliğinin değerinin inline olması gerektiği anlamına geliyor.

Bunu yapmak için, şablon klasöründe bulunan template.css dosyasında değişiklik yapmanız gerekir:

./templates/protostar/css/template.css