WordPress sitenizi yeniden tasarlamak için ipuçları
Web sitenizin görünümünü ve hissini WordPress gibi ayarlama gücü veren başka bir platform yoktur. WordPress’in web yayıncıları ve geliştiricileri arasında popüler olmasının nedenlerinden biri budur. Temel WP temasını (ve sıkıcı) alabilir, logolar ekleyebilir, birkaç kod satırını düzenleyebilir, CSS’nizi değiştirebilir ve kısa sürede profesyonel (ancak ilginç) görünen bir web sitesine sahip olabilirsiniz. Bu kolay iş ve bu öğretici size nasıl yapılacağını gösterecektir. Hazır mısın? Önce ilk şeyle başlayalım; renk. Bir Renk Şeması Tasarlama WordPress siteniz için bir renk şeması geliştirirken dikkate alınması gereken birçok şey vardır. Bunu evinizi veya taş dükkanınızı ve harçınızı boyamak olarak düşünün. Duvarınızda kullanılacak rengi ve istediğiniz kapının rengini belirlemelisiniz.
Dış ve iç kısmınızı boyama şekliniz kişisel tercihleriniz haline gelen çeşitli faktörlere bağlı olacaktır. WordPress sitenizi renklendirmek de farklı değildir. Bağlantınız için ne renk istiyorsunuz? Arka planınız, nasıl en ilginç hale getiriyorsunuz ve rakiplerinizin ağzını açık hale getiriyorsunuz? Mesajınızı hangi renk tamamlayacak (hatta güçlendirecek)? Metninizi nasıl istersiniz? Gökyüzü, WP sitenizde kullanabileceğiniz renk seçeneklerinin sınırıdır. Başından beri kullanacağınız tüm renkleri belirlemelisiniz. Sadece üç renk kullanmanızı tavsiye edeceğim, ancak istediğiniz kadar renk kullanmakta özgürsünüz.
Sadece bu, aşırıya kaçmayın yoksa pazarlama mesajınızı tüm bu renklerde zayıflatacaksınız. Sonuçta, aşırı toksik olan her şey, bu yüzden seçtiğiniz renkler ne olursa olsun, uyum sağlamak önemlidir. İnsanların çoğunluğunun göreceği (ve umarım) renklerin çoğunu kullanmak en iyisidir. Logonuzdan ve masthead’den bahsediyorum. Bu alan en çok renge ihtiyacınız olan yerdir; Web sitenizin geri kalanı daha az renkli ancak daha bilgilendirici olabilir. 216 Renkler 12 Renkler Hepimiz on iki temel renke aşinayız, ancak web farklı renk ve desenlerle doludur. Bu nedenle, profesyonel bir görünüm yaratırken kişisel sıcaklık yayacak renkleri seçmek zor bir görev olabilir. Şanslısınız, çünkü internetin her yerinde arıyorum ve başlamanıza yardımcı olacak aşağıdaki araçları buluyorum: Kuller
Kuler, Web geliştiricilerinin üst sınıf renk şemaları yapmasına yardımcı olmak için Adobe tarafından tasarlanmıştır. Kler çevrimiçi bir araçtır, yani onu taşıyabilir ve her yerden kullanabilirsiniz, ancak doğrudan masaüstünüzden bir renk şeması geliştirmenize yardımcı olacak masaüstü uygulamaları da vardır. Buna ek olarak, bir Adobe Kimliğiniz varsa, renk şemanızı tek bir tıklamayla kaydedebilirsiniz. Kuler ile monokromatik, bileşik, tamamlayıcı, benzer ve üçlü dahil olmak üzere çeşitli renk kuralları vardır.
HTML renk grafiğinin girdiği yer burasıdır. Bu, 200’den fazla (aslında 216) web renk koduna sahip renkli bir grafiktir. Grafiklerle donanmış, güneşte uygulanmasının zor olduğu kanıtlanmış bir renk yoktur. Kod, HTML, CSS, Adobe Photoshop ve diğer grafik manipülasyon araçlarıyla çalışacak, böylece dünyada renklerinizle istediğiniz kadar oynamak için tüm özgürlüğe sahipsiniz. Bkz. HTML.Genopal Renk Tablosu Renkleri seçmek için yardıma ihtiyacınız varsa, Genopal istediğiniz uygulamadır. Bu, tarayıcı pencerenize “sabitlenmiş” renk paleti olan çok basit bir web uygulamasıdır. Rengi seçtiğinizde, renk tarayıcınızda “yapışkan not” renkte görünür. Bir genopal ile parlaklığı artırabilir ve ton doygunluğunu kontrol edebilirsiniz, böylece istediğiniz gölgeyi elde edersiniz. Web sitelerinde hücresel uygulamalar bu süreçte. Başlatıldıktan sonra, mobil cihazınızda bir uygulama taşımanıza ve renkler geliştirmenize olanak tanır. Tasarımları akıllıdır ve bu uygulamanın gerçekten çalışması, Genopal’ın iş anlamına geldiğinin açık bir işaretidir.
ColorHexa ColorHexa, sanatçı boya plakasının çevrimiçi bir versiyonudur. Bu web sitesi size sadece renk kodları girerek renkleri karıştırma yeteneği sunar. Selefi uygulamaları bir renk mikseridir, ancak bir gradyan jeneratörü ve renk azaltmaya sahiptirler. Bu saf dahi burada çalışmıyor mu? ColorHexa Blender nasıl çalışır? Tek yapmanız gereken “+” işaretiyle ayrılmış renk kodunu yazmak ve Colorhexa gerisini yapar. Örneğin, denedim: #ff0000 + #0000ff + #ff00ff ve #AA00AA aldım. Dahası, size tüm Renk Bilgileri sayfasını verirler (son renkte #AA00AA gibi). Bu, daha önce hiç bulunmayan bir renk karışımı deneyimlemek için kendinizi denemeniz gereken araçlardan biridir. Bkz. ColorHexa. Ultimate CSS gradyan jeneratörü
Bu, bir renk gradyanı ürettiği sürece en iyi araç olabilir. Bu tamamen çevrimiçi ve ferahlatıcı bir orta nokta ve uygun CSS kodu üretmenize yardımcı olur. Ayrıca, daha kolay ve daha hızlı erişim için uygulamaları tarayıcınıza entegre etmenize izin vermek için Chrome ve Firefox eklentileri sağlarlar. Gradyanınızı gördüğünüz bir önizleme alanı vardır, bu nedenle tek yapmanız gereken dileklerinize göre bir gradyan yapmak ve üretilen CSS kodunu kopyalamaktır. Bu çok kolay ve şimdiye kadar kullandığınızdan daha fazla renk var. Bkz. Jeneratör Gradien CSS Ultimate. Yazı Tiplerini Seçme Şimdi size Picasso gibi renkleri nasıl seçeceğinizi ve birleştireceğinizi gösterdim, hadi yazı tipleriyle oynayalım. Renkiniz ve web tasarımınız insanları çekecektir, ancak sözleriniz sayfalar ve insanların hayatta kalmasını sağlayacak gönderinizdir. Her zaman en iyi hikayelerimizi yapmakla meşgulüz, bu yüzden çoğumuz yazı tiplerinin de önemli olduğunu unutuyoruz. Ancak seçtiğiniz yazı tipi, insanların web sitenizle etkileşim kurma şeklini etkiler. Doğru yazı tipiyle, hedef kitleniz hayatta kalmak ve son olarak istediğiniz gibi diğer sayfalarınıza tıklamak isteyecektir. Ek. Orada bir milyon bir yazı tipi var, ancak maalesef kullanıcılar yalnızca makinelerinde yüklü yazı tiplerini görecekler. Kullandığınız yazı tipleri makinelerine yüklenmiyorsa, istediğinizle aynı etkiye sahip olmayan benzer (veya tamamen farklı yazı tipleri) alternatifler görecektir. “Fire ile oynamak gibi yazı tipleriyle oynamak. Bazen bir web sayfasındaki bir eşleşmeyi, güzel bir metni açabilir. Diğer zamanlarda, tüm evi yakabilir. ” – Lorelle CamerAnteroad.com. Yazı tipinizi kontrol edebilir (ve stil sayfanızla istediğiniz efekti oluşturabilirsiniz). Temanızda Styles sayfası genellikle bir style.css dosyasıdır. Bu dosyayı yazı tipinizin rengini, yazı tipi türünüzün/yazı tipi-aile’nizin, yazı tipi boyutunun ve seçtiğiniz yazı tipinin diğer yönlerini kontrol etmek için kullanabilirsiniz.
Aşağıdakiler iyi bir örnek: #Menu {font-ailesi: Arial, Helvetica, Sans-Serif, Verdana, “Times New Roman”; Yazı tipi boyutu: 0.8EM; Black Color;} Yukarıdaki kod menünüzdeki yazı tipi boyutunu 0.8EM olarak ayarlayacak ve rengi siyah olarak ayarlayacaktır. Bu aynı zamanda yazı tipini ARIAL olarak ayarlayacaktır, ancak kullanıcının makinelerinde arial yoksa, Helvetica devralacaktır. Helvetica veya Arial, Verdana, Sans-Serif veya Times New Roman’ı devralacaklar. Yazı tiplerini kontrol ederek daha tutarlı bir görünüm ve his oluşturabilirsiniz. Bununla birlikte, yazı tipi tutarsızlıkları sorununun bir kez ve herkes için üstesinden gelmek için gömülü yazı tiplerini kullanabilirsiniz. Gömülü (veya harici) yazı tiplerini kullanarak kullanıcıların makinelerinde yazı tipleri olması gerekmez. Buna ek olarak, bu kolay bir iş. Tek yapmanız gereken stilinizi açmak ve aşağıdaki kodu yukarı koymaktır. @font-face {font-family: Museo300; SRC: URL (“Font/Museo300-Regular.ttf”) Biçim: (‘Truetype’); Yazı Tipi: Normal;} Not: Yazı tipinizin adını ve konumunu belirlemelisiniz. Yukarıdaki örnekte “Museo300”, “Yazı Tipi” adlı bir klasörde saklanan bir yazı tipidir. Örneğin, web sitenizde yazı tiplerini kullanmak için: Body {font-family: museo300;} Web sitenizdeki herhangi bir öğe için gömülü yazı tiplerini kullanabilirsiniz. Örneğin … #Menu {Font-Family: Museo300; } … Museo300’ü menünüze ayarlayacak. Yukarıdaki yöntem, yazı tipini indirmeniz ve sunucunuza yüklemeniz gerektiği anlamına gelir; bana sorarsanız oldukça sıkıcıdır. Ancak, kullanmak istediğiniz harici yazı tipini indirmeniz gerekmez. Sadece başınızın yazı tipine (header.php) bağlantı kurarsınız: Yukarıdaki satırı nasıl ve nereye ekliyorsunuz? WordPress yönetim panelini açmanız gerekir -> görünüm -> editör -> header.php Header.php dosyanızı istemiyorsanız veya düzenleyemiyorsanız, style.css’inize aşağıdaki satırları yazarak yazı tiplerini içe aktarmanız yeterlidir: @Import url (http: http: http: http: http: http: http: //fonts.googleapis.com/css?family=over+he+Rainbow); Yukarıdaki örnek, sitenizin herhangi bir yerinde Google’dan Rainbow Overbow Yazı Tipi’ni kullanmanıza izin verecektir. Örneğin, tüm web sitelerinizde gökkuşağının üzerinde kullanmak istiyorsanız, şu kodu kullanabilirsiniz: gövde {font-family: “Yukarıda Rainbow”;} Google, 600’den fazla ücretsiz yazı tipi sağlar, bu yüzden oyna! 12/ 13): WordPress sitenize Google yazı tipini kolayca eklemek istiyorsanız, Google Tipografi eklentisini kullanabilirsiniz. Ayrıca, Google yazı tipleri ve WordPress web sitenizin tipografisini Tom Ewer tarafından Google Font ile nasıl geliştireceğiniz hakkında daha fazla bilgi edinebilirsiniz. Yazı Tipleri ile Oynama Hakkında Daha Fazla Kaynak
@Font-face için önemli kılavuz
Yazı tipleri hakkında resmi belgeler
Okul W3: Yazı Tipi CSS
Yolda Kamera: Deney CSS – Web Yazı Tipi ve Gömülü Yazı Tipleri
Yazı tipleri eklemek için WordPress eklentileri ve kodu kazmak istemeyenler için, sizin için ağır işler yapmak için her zaman WordPress eklentisini yükleyebilirsiniz.İşte wordpress.com:wp Google yazı tipinden daha popüler olan bazı ücretsiz yazı tipi eklentileri
Yazı Tipi – Resmi Webfont eklentisi
Herhangi bir yazı tipi kullanın
Eğleniyor musun?Devam edelim … Tarih ve saati biçimlendirin, tarihi veya saati çok iyi bir tonda görüntüleyen WordPress sitesini ziyaret ettiniz mi, bu da sitenizin ilgili olduğu yerde yeni başlayanlar gibi hissettiriyor mu?Bu sitenin sahibi sadece bir kod satırı ile oynuyor ve şimdi yeterli tarih alamıyorsunuz.Ha ha.İyi haber, bu kod satırını düzenleyebilir ve okuyucunuzu da şaşırtabilirsiniz.Gösterge panosunda WP, görünüşe, ardından aşağıda gösterildiği gibi düzenleyiciye gidin:
Bir kez, .php dosya listenizi en sağda görebileceksiniz:
Bir Gönderi (Single.php) tıklayın ve açıldıktan sonra CTRL+F’ye basarak arama çubuğunu açın. Görünen arama çubuğunda, yazın: Hemen hemen şöyleyebilecek bir satır göreceğiniz: Şimdi, düzenlemek istediğiniz alan (‘f y’). Isırılacak daha esnek bir şey vermek için bu bölümü mükemmelleştirmeme izin verin. (‘F y’) içindeki “F” harfi, ayın tam adının kısaltmasıdır ve “Y” yılı 4 basamakta temsil eder. Bu nedenle, (‘f y’) kullanırsanız, tarihiniz şöyle görünecektir: Eylül 2013 F ve Y arasında bir komaya girerseniz, şöyle bir şey olmalı: Eylül 2013 Diğer günleri ve öğeleri eklemek istiyorsanız, Aşağıdaki karakterleri kullanın: L = Tam Ad Günü (Küçük Kase L) F = Ay J = Bir Ayda Gün (Tarih) Y = 4 Rakamda Yıl Y = Yıl 2 basamakta yıl aşağıdaki tabloda daha fazla karakter bulunabilir: ve Burada, bazı örnekler:
Her zaman yalnızca braketlerdeki karakterleri (‘f y’) düzenlemeyi unutmayın ve dikkat edin, tek bir tırnak işaretini silmeyin. İstediğiniz etkiyi elde etmek istediğiniz kadar karakter kullanmaktan çekinmeyin ve bitirdikten sonra her şeyi kaydetmeyi unutmayın. Dahası, son zamanlarda blogumda yaptığım gibi … … silerek tarihi ortadan kaldırabilirsiniz. Şimdi, tek aldığım Fred tarafından … blah blah kategorisinde yayınlandı. Hiç tarih yok. Bir sonraki bölüme teşvik ediliyor musunuz? Sen daha iyisin. _Time işlevini bulamıyor musunuz? Sorun değil, çünkü birçok tema artık daha iyi bir uygulama olan the_time () işlevi yerine the_date () işlevini kullanıyor. Temanız the_date () işlevini kullanıyorsa, herhangi bir düzenleme yapmanıza gerek yoktur, çünkü verilerin “Genel Ayarlar” altındaki gösterge tablosunda görüntülenme şeklini değiştirirsiniz. Bu görüntünün kullanılması bu öğreticinin en kolay (ve en kısa) kısmı olabilir. Ancak WordPress’te tamamen yeniyseniz, görüntü eklemek zor olabilir. WordPress, yeni bir yayın veya sayfa oluştururken yardımcı program yükleme veya (medya ekleme düğmeleri) aracılığıyla resim eklemenize olanak tanır. Yapmanız gereken tek şey imleci, görüntünün yayınınızda veya sayfanızda olmasını istediğiniz yere yerleştirmek, ardından “Medya Ekle” yi tıklayın. Yardımcı programın yüklenmesinden sonra, bilgi, boyut, bağlantı ve gibi diğer ayrıntıları ekleyebilirsiniz. Tesviye.
Bu alan yükleme yardımcı programının sağ tarafında bulunur.
Görüntü ekleme hakkında daha fazla bilgi edinmek için lütfen aşağıdaki kaynaklara bakın:
WordPress: Görüntüleri Kullanma
Görüntü boyutunu 16 x 16 piksel olarak değiştirin ve
Görüntüleri favicon.ico olarak kaydedin
Favicons yapmak için kullanabileceğiniz çevrimiçi hizmetler içerir (ancak sınırlı değildir):
Orijinal favicon jeneratörü
Dinamik sürücü
Bir favicon yaptıktan sonra, bilgisayara indirmenize izin verecekler, bu yüzden endişelenmeyin. Favicon’unuzu WordPress’e nasıl yükleyebilirsiniz, temanızın ana klasöründe başka favicons varsa, FTP istemcinizi veya sizin için mevcut herhangi bir yöntemi kullanarak silmeniz gerekir. FTP istemcileri önerilir, çünkü kullanımı kolaydır ve aradığınız dosyaları hızlı bir şekilde bulabilirsiniz. Bu öğretici için, blogum ve Filezilla için mevcut faviconları silmek için bir favicon oluşturmak için faviconer.com kullanıyorum. Favicon.ico dosyaları ile aynı dosyayı temanızın ana klasörüne yükleyin. Bu, temanızın şu anda kaydedildiği klasördür. Ardından, diğer favicon kopyalarınızı kök klasörüne (genellikle public_html) veya sitenizin depolandığı ana dizinine yükleyin, böylece kendinize.com/favicon.ico yazarken favicon’unuzu görebilirsiniz. Bu, favicon’unuzu otomatik olarak beslemenize ekleyecektir. Yüklemeyi bitirdikten sonra, favicon.ico’nuzun çalışmasının zamanı geldi. Yapmanız gereken budur: Favicon’unuzu eklemenin en iyi yolunu kullanarak favicon’unuzu ekleyin Bir eklenti kullanmaktır. Çok basit bir yaklaşım için daha fazla kullanım için “All in One Favicon” eklentisini kullanmanızı tavsiye edeceğim, arka uç seçeneği olmayan “En Basit Favicon” eklentisini kullanabilirsiniz, yalnızca Favicon adlı bir dosya yüklemeniz gerekir. ICO sunucunuzdaki doğru yerde. Şablonunuza manuel olarak favicon ekleyin Bazı kişiler, şablonlarına manuel olarak eklemek için favicon’larını manuel olarak eklemek için tercih edebilir (en iyi yol olmasa da), aşağıdaki adımları izlemek için:
Gösterge Tablonuzu görünümle girin
Sonra editöre (tema düzenleyicisi)
Header.php dosyasını bul ve aç (başlık)
Bu satırı başlık dosyanıza ekleyin ( diğer: <link rel = "kısayol simgesi" href = " /favicon.ico ” /> Tamamlandıktan sonra kaydedin. Tarayıcınızı yeni değişikliklerinizi görmek için yenileyin. Bu noktada rengi değiştirebilmeniz, daha iyi bir yazı tipi seçebilmeniz, tarih ve saati biçimlendirebilmeniz, görüntüleri kullanabilmeniz ve ekleyebilmelisiniz. Favicons. Sonuç WordPress sitenizi yeniden tasarlamak için tartışılan çok şey vardır, böylece her şeyi bir gönderide ele almaya çalışmak zararlı olacak. Maksimum kar elde etmek için, öğreticiyi birkaç bölüme bölmek en iyisidir (Bu Bölüm 1). Zamanla daha fazla püf noktasını paylaşacağız, bu yüzden dikkat edin. Bu öğreticinin amacı, şimdiye kadarki en iyi WordPress sitesini oluşturmanıza ve sizi daha mutlu hissetmenize yardımcı olmaktır. Her şeyi kendiniz yapıyorsun. Fikrinizi paylaşmak veya tartışmaya bir şeyler eklemek istiyorsanız, lütfen yorumlarınızı aşağıdaki yorumlar bölümünde bırakın!
