Mystique 3.0+ WordPress Tema Değiştir nasıl

Mystique 3,0 WordPress Tema birçok dahili özellik ama hala insanlar ihtiyaçlarını karşılamak için mistik tema değişiklikler arıyoruz vardır.

A+ A-

Bizim önceki yazıda ele aldığımız , Hacks 50 Most Wanted Mystique tema Değişiklikler . Mistik'te 3.0'da değişiklikler için sevgili okuyucular tarafından büyük talep ve önceki yazı için büyük tepki göz önüne alındığında, burada, Most Wanted Mystique 3.0+ Değişiklikler Hacks yayınlıyorsunuz. seçiminize göre Mystique tema özelleştirin.

Not: Eğer şeyler kodlama aşina değilseniz o zaman tek satır kod düzenlemek için hiçbir gerekli yoktur, ödeme Modifiye Mystique Tema - MystiqueRevised .

Kod Parçaları Mystique Tema Değiştir:

Not: Mistik WordPress Tema değiştirmek için size Görünümü altında, kod aşağıdaki eklemek zorunda -> Mystique -> CSS veya Gelişmiş sekmesinde. Size tema güncelleyecektir zaman herhangi bir değişiklik gevşek olmayacak şekilde her zaman Mystique çocuk tema yüklemek öneririz.

1. Site Başlığı Logo konumunu ayarlayın:

#site-title {
padding: 25px 0 2px 0;
}

25px sitesi başlığının üstünde alandır ve nerede 2px sitesi başlığı veya site logosunun altındaki alandır.

2. Değişim Site başlığı rengi:

#logo a {
color: #E0E0E0;
}

Başka bir renk istiyorsanız e0e0e0 değerini değiştirin.

Eğer seçimi göre site başlığını olmak için daha sonra kodu aşağıdakileri ekleyin:

#logo a {
    color: #E0E0E0;
    display: block;
    font-variant: small-caps;
    text-decoration: none;
    text-transform: none;
}

#logo {
    font: bold 395% Verdana,Arial,Helvetica,"Arial Black","Helvetica Black",Gadget,sans-serif;
    letter-spacing: -2px;
}

3. Blog başlığının vurgulu rengini değiştirin:

#logo a:hover {
color: #CECECE;
}

Başka bir renk istiyorsanız CECECE değerini değiştirin.

4. Artış sitesi başlık metin boyutu:

kod Aşağıdaki site başlığı metin kullanımının boyutunu artırmak için. buna göre 350 değerini ayarlayın.

#logo {
font: bold 350% "Arial Black","Helvetica Black",Gadget,sans-serif;
letter-spacing: -2px;
}
/* Change Appearance of Previous and Next Links */
.post-links a{
background-color: transparent;
border: 0 none;
color: #0071BB;
font-size: 14px;
font-weight: bold;
padding: 2px 4px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}

.post-links a:hover{
color: #ED1E24;
}

.post-links div{
color: #0071BB;
display: block;
line-height: normal;
max-width: 49%;
}

.post-links .alignright{
text-align: right;
}

6. Navigasyon bar ve içerik arasındaki boşluğu ayarlama:

.shadow-right {
padding-bottom: 18px;
}

ihtiyaca göre 18 değerini ayarlayın.

7. ana içeriğe sahip gezinme çubuğunu Üyelik:

.shadow-right {
padding-bottom: 0;
}

.social-media {
bottom: 10px;
right: 10px;
}

Join Navigation Bar - Mystique Theme Modifications

küçük harf 8. çevirin Widget başlıkları:

.block .title h3 {
text-transform: none;
}

9. sonrası içeride metnin varsayılan yazı tipi boyutunu değiştirin:

.hentry .post-content {
font-size: 16px;
line-height: 20px;
margin: 0 0 15px;
}

Her yazı için 10. Sınır:

Bazı insanlar her yayına sınır eklemek ister, burada yapmak kodu

.post{
border:2px solid;
margin:0 0 40px;
padding:15px;
text-align:justify;
}

Border For Each Post

11. siyah bir arka plan değiştirin:

Mystique teması, varsayılan arka plan diğer değiştirebilirsiniz siyahtır. Burada bir örnek olarak mavi verdi. Bunun yerine mavi sen #CECECE ya da istediğiniz herhangi bir başka değer olarak renk değerini kullanabilirsiniz.

body{background-color:blue;}

12. Alternatif başlık görüntü:

başlık görüntü görüntüsü aşağıda verilmiştir kod eklemek aşağıdaki kullanın.

/* Alternate header image */
#page{
background:transparent url(/images/extras/header-alternate.jpg) no-repeat center top;
}

Eğer çocuk temasını kullanıyorsanız o zaman resmin tam yolunu verir. Örneğin, ben kod aşağıdaki eklendi gelmiş çocuk temasını kullanıyorum olarak,

/* Alternate header image */
#page {
background:transparent url(/uploads/other-domain/wp-content/themes/mystique/images/extras/header-alternate.jpg) no-repeat center top;
}

13. Merkezi başlığındaki logo resmi:

#logo {
width : 100%;
text-align : center !important ;
}

Center Logo

14. sosyal medya simgeleri yukarı taşıyın:

.media {
    bottom: 30px;
    position: absolute;
    right: 2px;
    z-index: 5;
}

İstediğini için 30px değerini ayarlayın.

Move Up Social Media Icons

sonrası görüş 15. Ekran sayısı:

Milenko (Tema Geliştirici) yaptığı forumda söylediği gibi, Yayın görüntüleme zaten çünkü sonrası görüntüyü kaydetmeden büyük siteler (yani. Veritabanını her seferinde bir ziyaretçi güncellenmesi bir sayfa görüntülemesi) performansı üzerinde bir etkisi olabilir uygulanan, ancak varsayılan olarak devre dışıdır.
Eğer sonrası görüntüleme sayısı etkinleştirmek Çocuğunuz tema klasöründen functions.php dosyasını açmak istiyorsanız (olmalıdır gizemi-uzatmak) ve ekleyin:

define('ATOM_LOG_VIEWS', true);

Daha sonra aşağıdaki kodu arayın istediğiniz yere teaser.php örneğin, şablonlar kullanmak (çocuğunuz tema klasörüne orijinal kopyalayın):

<?php if(atom()->options('post_category') && atom()->post->getTerms('category')): ?>
<?php printf(_a('in %s'), atom()->post->getTerms('category', ', ')); ?>
<?php endif; ?>

daha sonra yukarıdaki kod aşağıdaki kodu aşağıdakileri ekleyin:

| Views <?php echo atom()->post->getViews(); ?>

No of Views

İçinde Widget'lar “Mesajlar” widget'ı gibi yapabilirsiniz şablonları {GÖRÜŞLER} anahtar sözcüğünü kullanarak çıkış sonrası görünümleri.

16. Eski tema gibi kategorilerle sayfaları değiştirin:

atom()->addContextArgs('primary_menu',categoryMenu);

Şimdi menüde kategoriler alırsınız.

17. Blog başlığı metnin aralığını değiştirin:

#logo{
  letter-spacing: 0; /* change this value, default is -6px */
}

3.0 ila gezinme çubuğunu nasıl kaldırılır 18.

#header .shadow-left{
  display: none;
}

Daha iyi bir yol, bir alt tema kullanarak: header.php çocuğunuzun temaya kopyalayıp navigasyon için kod kaldırmak

19. ol ul ayarlama:

ol arasındaki liste öğeleri, ul sol sınırında kesilir. İşte bu öğeleri ayarlamak için koddur

.hentry ol,ul{
  padding-left:15px;
}

20. Sadece logosunun yanına bir pankart ekleyin:

Logo with Banner

#header {
background: url(/uploads/other-domain/wp-content/themes/mystique/images/YOUR-LOGO-NAME.png);
background-repeat: no-repeat;
background-position:70% 30%;
}

% 70 'X' koordine olduğu zaman,% 30 'Y' koordine olan. Dolayısıyla, sadece değiştirin: background-pozisyon:% 98,% 50;
afiş konumunu ayarlamak için

sipariş bazında görünümleri için 21. Yıldız simgesi:

Sadece sipariş bazında görünümleri yıldız simgesi yok. Yorum sırası olsa vardır. Yani burada sipariş bazında görünümleri için yıldız simgesine eklemek kodu

.block-tabs .tabs .navi li.nav-posts-views a{background-position: 0 -37px;}

22. Değişim [...] 'ileri Oku' ile alıntılar gelen:

Çocuk temasını kullanın ve kullanıcı aşağıdaki kodu ekleyin - tanımlı kod.

<?php
add_filter('excerpt_more', 'my_read_more_text');
function my_read_more_text($text){
return sprintf(' <a class="more-link" href="%1$s">%2$s</a>', get_permalink(), 'Read further...');
}

23. sidebars gri (#eee) ve ana içerik beyaz (#fff) Marka:

Sidebar Content

.c2right #mask-1,
.c2left #mask-3,
.c3 #mask-2,
.c3left #mask-3,
.c3right #mask-1
  {background: #fff;}

.c2left #mask-1,
.c2right #mask-3,
.c3 #mask-1, .c3 #mask-3,
.c3left #mask-2,
.c3right #mask-3
  {background: #eee;}

24. Sabit özel arka plan resmi:

#page
{
  background-repeat:no-repeat;
  background-attachment: fixed;
}

comments dofollow nasıl yapılır 25.:

WordPress Gösterge Tablosu -> Görünüm -> Editör
Açık comment.php dosyası (Öneri: Kullanım Çocuk tema, çocuk tema klasörüne ana tema klasöründen comment.php dosyayı kopyalamak) ve değiştirme

atom()->getAuthorAsLink()

ile

atom()->getAuthorAsLink('dofollow')

“Göster Daha” düğmesinin 26. Değişim görünüm:

Varsayılan olarak “Göster Daha” butonu kolayca görünür değil, kullanım Aşağıdaki kod kolayca görünür hale getirmek için.

.no-fx .block a.more, .block .fadeThis a.more {
    -moz-border-radius: 5px 5px 5px 5px;
    background: none repeat scroll 0 0 #0997e1;
}

mavi dışındaki renk istiyorsanız ne istersen değer # 0997e1 değiştirin.

Ana sayfada yorum sayısını gösteren resmin 27. Değişim görünüm:

Modified Comments Image Mystique

İlk olarak, indirme ve eklemek icons.png senin Mystique Görüntü klasörüne görüntü dosyası (temalar / mistik / images /).

.hentry .comments {
position: absolute;
right: 1px;
top: 5px;
z-index: 5;
background: url("YOUR SITE URL HERE/wp-content/themes/mystique/images/icons.png") no-repeat scroll 0 -505px transparent;
width: 48px;
height: 38px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: #999 0px -1px -1px;
line-height: 34px;
font-size: 150%;
ont-weight: bold;
}

.hentry a.comments:hover {
background-position: 0px -543px;
color: #fff;
text-shadow: #000 0px -1px -1px;
}

Gerçek site adresinin “BURAYA SITE URL” metni değiştirmek için unutmayın.

28. tablolara şeffaf sınırları ekleyin:

table,table td,table th,table tr.even td,table tr:hover td{border:0;background-color:transparent;}

29. Her sonrası başlığı boyutunu azaltın:

h1.title {
    font-size: 250%;
}

Orijinal değer, ihtiyaca göre değerini ayarlamak, 300% 'dir.

Kenar çubuğunu kapsayan olmadan resimleri görüntülemek için tek mesajların İçin 30.:

img {
max-width: 468px;
max-height: 560px;
}

Herkes istediği için tercihinize göre max-genişliğini ayarlayın.

başlığın altında 31. hareket kısa açıklama:

#logo{
  float:none;
}

#site-title .headline{
 float:none;
 border:0;
 margin:20px 0;
 padding:0;
}

Mystique 3.0+ Navigasyon Bar'da Google +1 düğmesi nasıl eklenir 32.:

WordPress Dashboard altında -> Görünüm -> Editör
Şablonlar Sütun “footer.php” dosyasını arayın.
için footer.php dosya aramasında vücut etiketinden önce kodu aşağıdaki etiketlemek ve ekleyin:

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Sonra WordPress Dashboard altında -> Görünüm -> Mystique ayarları
Gelişmiş sekmesinde -> “Kullanıcı tanımlı kod“.

<?php
// for custom menus
add_filter('wp_nav_menu_items', 'add_google_plus_button_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_google_plus_button_to_menus');

function add_google_plus_button_to_menus($items){

// append it to the nav menu
return $items.'<li style="float: right; margin-left: 111px; padding-top: 6px;">
<div class="g-plusone"><g:plusone annotation="inline"></g:plusone></div>
</li>';
}

Google Plus Button Mystique Nav

Artık Mystique gezinme çubuğu Google+ düğme göreceksiniz. Sen Facebook Beğen düğmesini eklemek için aynı prosedürü tekrarlayabilirsiniz.

Mystique 3.0+ Navigasyon Bar'da Arama eklemek için 33. Nasıl:

altında WordPress Dashboard -> Görünüm -> Mystique ayarları
Gelişmiş sekmesinde -> “Kullanıcı tanımlı kod“.

<?php

// for custom menus
add_filter('wp_nav_menu_items', 'add_search_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_search_to_menus');

function add_search_to_menus($items){

// capture the search template
ob_start();
atom()->template('searchform');
$search = ob_get_clean();

// append it to the nav menu
return $items.'<li class="nav-search">'.$search.'</li>';
}

Ve Mystique ayarlarında aşağıdaki kodu ekleyin -> CSS sekmesi

/* increases top/bottom padding on nav items, so it fits the theme-default search form */
.nav-main a{
padding:12px 15px 14px;
}

/* position and width of the form: top-right */
.nav-main li.nav-search{
position:absolute;
background: none;
border: 0;
width: 250px; /* <- width of the search form, can be changed */
height: 34px;
right:10px;
top:5px;
}

/* no padding on this nav menu item */
.nav-main li.nav-search a{
padding: 0;
}

.nav-main li.nav-search li:hover a{
background-color: transparent;
}

.media {
bottom: 35px;
position: absolute;
right: 2px;
z-index: 5;
}

Search in Mystique Navigation Bar

34. Nasıl Ana Sayfa stilini değiştirme için:

Eğer ana sayfa görünümünü değiştirmek ve yeni bir dosya oluşturmak sadece post küçük resim ve yazının başlığını göstermek istiyorum ve çocuğunuzun tema klasöründe dosyaya isim teaser.php vermek istiyorsanız, teaser.php içindeki kod şunları ekleyin:

<article id="post-<?php the_ID(); ?>" <?php post_class('thumb-only'); ?>>
<a class="post-thumb" href="<?php atom()->post->URL(); ?>">
<?php atom()->post->thumbnail(); ?>
</a>

<section>
<header><a href="<?php atom()->post->URL(); ?>"><?php atom()->post->title(); ?></a></header>
<p><strong><?php atom()->post->terms('category'); ?></strong></p>
<footer><?php atom()->post->date(); ?></footer>
</section>
</article>

Sonra Mystique ayarlarında -> CSS sekmesi aşağıdaki kodu ekleyin:

article a img{
  border: 1px solid #fff;
  box-shadow: 0 0 5px 1px #888;
}

article section{
  text-align:right;
}

article section header{
  font-size: 130%;
}

Breadcrumbs ekleme 35. Nasıl:

Size Mystique Tema için Breadcrumbs eklemek için önerilir. Çünkü kullanılabilirlik tasarımı için çok iyi bir ektir ve dolayısıyla sayfa indeksleme bot aktivitesinin artırılması yoluna bağlayan çünkü o da SEO yararlar sağlar. Sayfa işaretleri ana sayfasına vb, bir sonraki yayına, veya çocuk sayfasından, görevinden, kategori, kolayca sitelerinde gezinmek için bir yol sağlar

Öncelikle gerek RDFa'yı Breadcrumb eklentisi indirmek yükleme ve her zamanki gibi etkinleştirin. Eğer kullanıyorsanız Yoast tarafından WordPress SEO sonra yöntem WordPress SEO kullanarak kırıntıları eklemek için aşağıda verilmiştir.

Not: etkinleştirin Mystique Çocuk Teması (Mystique-uzatın), sonra WordPress Dashboard altında -> Görünüm -> Mystique ayarları -> Gelişmiş, Kullanıcı tanımlı kodu arayacak ve aşağıdaki kodu ekleyin:

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if(function_exists('rdfa_breadcrumb')){ rdfa_breadcrumb(); }
       });
echo '</div>';

Size (- -> SEO> İç Bağlantılar WordPress Dashboard) kırıntıları seçeneği etkinleştirdiyseniz Yoast tarafından WordPress SEO sonra yerine Gelişmiş-> “Kullanıcı tanımlı kod” kod aşağıdaki kod eklenti yukarıda ekledi.

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if ( function_exists('yoast_breadcrumb') ) {
             yoast_breadcrumb('<p id="breadcrumbs">','</p>');
          }
       });
echo '</div>';

aşağıdaki gibi kod yukarıdaki ekledikten sonra Yayınınızdaki Breadcrumb göreceksiniz:

Breadcrumbs For Mystique WordPress Theme

Arama motoru sonuç sayfalarında, galeta unu ekledikten sonra (SERP) sitenizin sonuçları aşağıdaki gibi görünecektir.

Breadcrumbs in SERP

Not: arama motoru botları sitenizi taramasını nasıl bağlı tüm sayfaları için kırıntıları göstermek için 2 gün yaklaşık 12 saat sürer. Sen sitenizin galeta unu kontrol edebilirsiniz Zengin Snippet Aracı .

Bir şey daha, önceki ve sonraki yayın bağlantı bağlantılar yerine yukarıda yazılan başlığın yazısı sonra olduklarında yararlıdır, yani kodu arayın

<?php if(atom()->options('single_links')): ?>
            <div class="post-links clear-block">
              <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
              <div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
            </div>
<?php endif; ?>

Aşağıdaki satırdan sonra kodu ve hamur kesin:

 <?php atom()->action('after_primary'); ?>

Önceki ve sonraki sonrası bağlantısını görünümünü değiştirmek istiyorsanız o zaman ödeme beşinci kod parçacığını .

36. Nasıl Altyazı Metni Büyüt için:

Eğer başlık metninin yazı tipi boyutunu değiştirmek isterseniz o zaman Mystique ayarlarında aşağıdaki kodu ekleyin -> CSS sekmesi

.wp-caption-text {
   font-size: 13px;
}

Gelecekte, Mystique tema pek çok değişiklik yüzden güncellenmiş Bu konuyu devam edeceğiz yapacağız. Lütfen aşağıdaki formu yorumunda daha sonra burada sağlanan bizimle paylaşmak kod snippet'lerle ilgili bazı öneri veya sorun varsa, biz sorunları çözmek için çalışacağım.

Referans: Digitalnature Forum , Milenko için teşekkürler.

Bu Mystique Tema Değişiklikler isterseniz retweet ve Facebook'ta arkadaşlarınızla paylaşabilir ve Google + geçiniz.