WordPress temalarını tasarlamak ve geliştirmek için birkaç yıldan (hatta aylar sonra) sonra, özellikle müşteriler için, bir çok işlevin standartlaştırılabileceğini veya bir “başlangıç teması veya kitine” dönüştürülebildiğini fark etmeye başlarsınız. Bu, geliştirme sürecinin başlatılmasına ve acele boyunca ilerlemesine yardımcı olur.
Bunu yapmanın en iyi ilk adımı, ortak işlevlerin çoğunu aşağılamak ve bunları functions.php . Bu functions.php Dosyanın yeni projeler ortaya çıktıkça belirli temaların ihtiyaçlarını karşılamak için genişletilmesi gerekecek, ancak geliştirme için müthiş bir başlangıç noktası sağlayacaktır.
Başlamaktan hoşlandığım yaklaşık 13 temel işlev var ve bunlara gerektiği gibi eklenecek…
WordPress 3.0'da tanıtılan gezinme menüsü özelliği, temalarda gezinme menülerinin sezgisel olarak oluşturulmasını ve korunmasını sağlar.
En azından, standart bir tema, muhtemelen üstbilgide ve altbilgideki ikincil gezinme menüsündeki bir ana gezinme menüsüne ihtiyaç duyacaktır. Bunu yapmak için, bu iki menüyü "Ana Menü" ve "İkincil Menü" olarak kaydedeceğiz.
Bu özellikle yeni bir özellik olmasa da, hala if function_exists() Sadece kullanıcı 3.0 öncesi kurulumda sıkışmışsa:
İçinde functions.php dosyaya aşağıdakileri ekleyin:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Artık Menüler kaydedildiğine göre, temayı onlara çıktıkları yere söylemeliyiz. Ana Menü’nün başlığımızda görünmesini isteriz. Yani bizim header.php dosya, aşağıdaki kodu içerir:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
İlk olarak, 'main_menu' olarak adlandırılan bir menümüzün olup olmadığını kontrol ediyoruz ve eğer yaparsak, içeriğini buraya ekliyoruz, aksi takdirde varsayılan değerlere geri dönüyoruz. wp_list_pages() Bağlantıları, ihtiyaç duyduğumuz şekilde görüntülemek için daha da özelleştirebiliriz.
Menüyü daha da özelleştirmek isterseniz, WordPress kodeks sayfası wp_nav_menu() işlevi.
İkincil menünün altbilgide görünmesini istiyoruz, böylece footer.php ve aşağıdaki kodu ekleyin:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Bu işlev, WordPress TinyMCE görsel editörünü stillendirmek için özel CSS kullanmanıza izin verir.
Adlı bir CSS dosyası oluştur editor-style.css ve stillerini içeriye yapıştır. Bir yer tutucu olarak, stillerle başlamayı seviyorum. editor-style.css Yirmi Twelve temasının dosyası.
İçinde functions.php aşağıdakileri ekleyin:
add_editor_style();CSS dosyanız için “editör stili” adını kullanmak istemiyorsanız ve başka bir yerde, örneğin bir css dizininde dosyayı taşımak istiyorsanız, işlevi değiştirin.
Örneğin, dosyamı adlandırmak istiyorum tiny-mce-styles.css ve bunu CSS dizinimde istiyorum; bu yüzden fonksiyonum şöyle görünecek:
add_editor_style('/css/editor-style.css'); Biz bu konudayken, sağdan sola yazılan dilleri editöre göre şekillendirebiliriz. Tema dizininde, adında bir CSS dosyası oluşturun. editor-style-rtl.css ve en azından aşağıdakileri içerir:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Yine, bir yer tutucu olarak, yukarıdaki stilleri Yirmi Twelve temasından. Gerektiğinde restyle ve uzatın.
Çevrimiçi bloglarda yorum yapan çoğu kullanıcının onlarla ilişkili bir avatarı vardır. Ancak, bunu yapmazlarsa ve özellikle WordPress varsayılan avatar seçeneklerinden hoşlanmıyorsanız, kendiniz tanımlayabilirsiniz.
Bunu yapmak için aşağıdaki kodu functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} İlk olarak burada yaptığımız şey, fonksiyonun var olup olmadığını kontrol etmektir. Bunu yaparsa, WordPress'e özel tanımlanmış avatarımızı varsayılan olarak kullanmasını söyleyen bir filtre ekleriz.
WordPress'e bu dizini tema dizinindeki “images” dizinimizde bulmasını söyledik. Bir sonraki adım, açık olarak, görüntünün kendisini oluşturmak ve “görüntüler” klasörüne yüklemek.
Yayın biçimleri özelliği, yazıların stilini ve sunumunu özelleştirmenizi sağlar. Bu yazının yanı sıra, kullanıcıların seçebileceği 9 standart yazı biçimi vardır: bir kenara, galeriye, bağlantıya, imge, alıntı, durum, video, ses ve sohbet. Bunlara ek olarak, varsayılan “Standart” yayın biçimi, belirli bir gönderi için herhangi bir yayın biçiminin belirtilmediğini gösterir.
Bu işlevi temanıza eklemek için aşağıdaki kodu functions.php , yararlanacağınız yayın biçimlerini belirtin. Örneğin, sadece bir kenara, görüntüye, bağlantıya, alıntıya ve durum Post Format'larına sahip olmak istiyorsanız, kodunuz şöyle görünmelidir:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );Öne çıkan resim işlevi, kodx Açıklar, yazarın Mesajlar, Sayfalar veya Özel Posta Türleri için temsili bir imaj seçmesini sağlar.
Bu işlevselliği etkinleştirmek için, aşağıdaki kodu functions.php :
add_theme_support( 'post-thumbnails' );Orada durabiliriz ve küçük resim boyutlarını tanımlamak için WordPress'e bırakabiliriz veya kontrolü ele alıp kendimizi tanımlayabiliriz. İkincisi yapacağız, belli ki!
Öne çıkan görüntünün en az 3 farklı boyutta görüneceği bir dergi sitesi yayınladığımızı varsayalım. Gönderi yayınlanmışsa ya da en yenisi ise büyük bir resim olabilir. Orta büyüklükteki bir resim, geri kalanlar arasında sadece bir yazı ve belki de başka bir yerde görülebilir.
Biz yararlanmak add_image_size() WordPress uygulamasına, tanımlı boyutlarımızda öne çıkan görsellerimizin bir kopyasını almasını bildiren işlev.
Bunu yapmak için aşağıdakileri ekliyoruz functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); İle nasıl çalışacağını görün add_image_size() Yumuşak kırpma veya görüntülerinizi sabit kırpma WordPress kodeks sayfası.
Yukarıdaki resim boyutlarını (normal, orta ve büyük) tanımladıktan sonra - ve varsayılan olarak WordPress bunu bizim için yapmaz - Eklenti Görüntü Ayarları arayüzünden bu görüntü boyutlarını seçme yeteneğini ekleyeceğiz.
Bir yazı yazarken, normalde WordPress varsayılan boyutlarında yaptığınız gibi, açılır menüden seçerek istediğiniz boyut resmini ekleyebilirsiniz.
Bunu yapmak için aşağıdakileri ekliyoruz: functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Bununla birlikte, görüntü boyutlarımızı seçebiliriz.
Bu basit. Bir süredir WordPress temaları oluşturuyorsanız, header.php'de RSS beslemesini yayınlamak için kodu manuel olarak eklemeniz gereken günleri hatırlayacaksınız. Bu yaklaşım daha temiz ve wp_head() Gerekli kodu çıkarmak için hareket kancası.
İçinde functions.php dosyaya aşağıdakileri ekleyin:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Sahip olduğunuzdan emin olun it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Bu işlevle, temanızı çeviri için kullanılabilir hale getirmek için ilk adımı atmış olursunuz.
İçinden bu işlevi çağırmak en iyisi after_setup_theme() eylem kanca, yani temanın kurulum, kayıt ve başlatma işlemlerinden sonra çalıştı.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Şimdi 'adlı bir dizin ekleyin languages 'tema dizininizde.
Load_theme_textdomain () işlevi hakkında daha fazla bilgi edinebilirsiniz. WordPress kodeks sayfası .
İçerik genişliği, temalarda, bir temadaki videolar, resimler ve diğer oEnlenmiş içerik için izin verilen maksimum genişliği ayarlamanıza olanak veren bir özelliktir.
Bu, YouTube URL'sini editöre yapıştırdığınızda ve WordPress uygulamasının gerçek videoyu ön uçta otomatik olarak görüntülediğinizde, videonun, $content_width değişken.
if ( ! isset( $content_width ) )$content_width = 600;WordPress ayrıca aşağıdaki CSS'nin eklenmesini önerir:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Bu yararlı olsa da, biraz ağır. Tüm içeriğin içerik genişliğini tanımlar. Sayfalarda daha geniş bir genişlikte videoların yayınlarda ve özel bir gönderi türünde daha büyük bir boyutta olmasını isterseniz ne yapmalısınız? Şu anda bunu tanımlamanın bir yolu yoktur. Ancak bir özellik isteği dahil edilmesini öneren $content_width yerleşik içine değişken add_theme_support() .
Tipik temanız en az bir kenar çubuğuna sahip olacaktır. Kenar çubuğunu tanımlayan kod oldukça basittir.
Aşağıdakileri ekleyin functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Bu, “Ana Kenar Çubuğu” adlı bir kenar çubuğunu ve HTML biçimlendirmesini kaydeder ve tanımlar.
Hakkında daha fazla bilgi edinebilirsiniz register_sidebar() WordPress kodeks sayfasında çalışır.
Rutin olarak bir kenar çubuğundan daha fazlasına ihtiyacınız olduğunu göreceksiniz, böylece yukarıdaki kodu kopyalayıp yapıştırabilir ve adı değiştirebilirsiniz.
Ayrıca bir register_sidebars() Birden fazla kenar çubuğunu tek seferde kaydetmenize ve tanımlamanıza olanak tanıyan işlev, ancak her yeni kenar çubuğuna benzersiz bir ad vermenin esnekliğini sağlamaz.
Bir blog dizini sayfanızda yayınlarınızın alıntılarını görüntülüyorsanız, varsayılan olarak WordPress gösterilir [...] “atlamadan sonra” daha fazla olduğunu göstermek için.
Büyük olasılıkla “daha fazla bağlantı” eklemek ve bunun nasıl göründüğünü tanımlamak isteyeceksiniz.
Bunu yapmak için aşağıdaki kodu eklememiz gerekir. functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Örneğin, temanızda özel talimatlar varsa. kullanıcının temayı ilk kez etkinleştirdiğinde görmesini istediğiniz tema seçenekleri sayfanızda, onları yönlendirmek için aşağıdaki işlevi kullanabilirsiniz:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Özel dikkat wp_redirect() işlevi. 'Değiştirdiğinizden emin olun. themes.php?page=themeoptions 'sayfanızın URL’si ile.
Geliştirme sırasında, bazen WordPress yönetici (araç) çubuğunu oldukça dikkat dağıtıcı buluyorum.
Pencerenin üst kısmında sabit bir pozisyonda ve benim düzenime bağlı olarak başlığın bazı unsurlarını kapsayabilir.
Tasarlarken ve geliştirirken, bu kullanışlı işlevle yönetici çubuğunu gizlemeyi seviyorum.
show_admin_bar( false );WordPress şablon geliştirme başlangıç atlama için herhangi bir favori fonksiyon var mı? Hangi işlevleri görmek istersiniz? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, çoklu araç görüntüsü Shutterstock üzerinden.