Cara mengubah Mystique 3.0+ Theme WordPress

Mystique 3.0 Theme WordPress memiliki banyak fitur inbuilt tapi masih orang mencari modifikasi mistik tema sesuai perlu ada.

A+ A-

Dalam artikel kami sebelumnya kami telah membahas 50 Most Wanted Modifikasi Tema Mystique, Hacks . Mengingat permintaan yang besar oleh pembaca kami tercinta untuk modifikasi di Mystique 3.0 dan respon besar untuk artikel sebelumnya, di sini kita menerbitkan Most Wanted Mystique 3.0+ Modifikasi, Hacks. Menyesuaikan tema Mystique sesuai pilihan Anda.

Catatan: Jika Anda tidak terbiasa dengan coding hal maka tidak ada perlu untuk mengedit baris kode, checkout Modified Mystique Theme - MystiqueRevised .

Code Snippets untuk memodifikasi Tema Mystique:

Catatan: Untuk mengubah Mystique Theme WordPress Anda harus menambahkan kode berikut, Under Penampilan -> Mystique -> CSS atau di tab Advanced. Kami menyarankan selalu menginstal tema anak Mystique sehingga Anda tidak akan kehilangan modifikasi apapun ketika Anda akan memperbarui tema.

1. Sesuaikan posisi Site Judul Logo:

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

Mana 25px adalah ruang di atas judul situs dan 2px adalah ruang bawah judul situs atau logo situs.

2. Ganti Site title warna:

#logo a {
color: #E0E0E0;
}

Mengubah nilai e0e0e0 jika Anda ingin warna lain.

Jika Anda ingin membuat judul situs sesuai pilihan kami kemudian tambahkan kode berikut:

#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. Ubah warna melayang dari judul blog:

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

Mengubah nilai CECECE jika Anda ingin warna lain.

Ukuran situs teks judul 4. Meningkatkan:

Untuk meningkatkan ukuran penggunaan teks situs judul kode berikut. Menyesuaikan nilai 350 sesuai.

#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. Sesuaikan ruang antara Navigasi bar dan konten:

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

Menyesuaikan nilai 18 sesuai dengan kebutuhan Anda.

7. Bergabung navigasi bar dengan konten utama:

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

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

Join Navigation Bar - Mystique Theme Modifications

8. judul Aktifkan widget ke huruf kecil:

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

9. Mengubah ukuran font default teks dalam pos ini:

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

10. Perbatasan untuk setiap posting:

Beberapa orang ingin menambahkan border untuk setiap posting, di sini adalah kode untuk melakukan itu,

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

Border For Each Post

11. Mengubah latar belakang hitam:

Dalam tema Mystique, latar belakang default hitam Anda dapat mengubahnya ke lainnya. Berikut kami berikan biru sebagai contoh. Bukan biru Anda dapat menggunakan nilai warna sebagai #CECECE atau nilai lain yang Anda inginkan.

body{background-color:blue;}

12. Alternatif header image:

Untuk menggunakan berikut gambar header menambahkan kode yang diberikan di bawah gambar.

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

Jika Anda menggunakan tema anak kemudian memberikan path lengkap dari gambar. Sebagai contoh, karena saya menggunakan tema anak saya telah menambahkan kode berikut,

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

13. Pusat gambar logo di header:

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

Center Logo

14. Pindah ke atas ikon media sosial:

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

Menyesuaikan nilai 30px untuk apa pun yang Anda inginkan.

Move Up Social Media Icons

15. Jumlah Tampilan penayangan posting:

Sebagai Milenko (Tema Developer) mengatakan di forum nya, Pos views sudah dilaksanakan, tapi dinonaktifkan secara default karena di situs besar rekaman tampilan pos (yaitu. Memperbarui database setiap kali pengunjung melihat laman) dapat berdampak pada kinerja.
Jika Anda ingin mengaktifkan pos jumlah penayangan, buka file functions.php dari folder tema anak Anda (harus mistik-memperpanjang) dan menambahkan:

define('ATOM_LOG_VIEWS', true);

Kemudian menggunakannya di mana pun Anda inginkan dalam template, misalnya dalam teaser.php (copy asli ke folder tema anak Anda) cari kode berikut:

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

kemudian tambahkan kode di bawah kode di atas sebagai berikut:

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

No of Views

widget dalam, seperti "Posts" widget Anda dapat output posting tampilan dengan menggunakan {} PANDANGAN kata kunci dalam template.

16. Ganti halaman dengan kategori seperti di tema lama:

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

Sekarang Anda akan mendapatkan kategori di menu.

17. Ubah jarak dari teks judul blog:

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

18. Bagaimana menghapus bar navigasi dari 3.0

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

Cara yang lebih baik, menggunakan tema anak: menyalin header.php dengan tema anak Anda dan menghapus kode untuk navigasi

19. Sesuaikan ol, ul:

Daftar item antara ol, ul dipotong di perbatasan kiri. Berikut adalah kode untuk menyesuaikan barang-barang ini

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

20. Tambahkan spanduk hanya dekat logo:

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%;
}

Di mana 70% adalah 'X' koordinasi, 30% adalah 'Y' koordinasi. Jadi hanya mengubah: background-position: 98% 50%;
untuk menyesuaikan posisi spanduk

ikon bintang 21. untuk pesanan-by-pandangan:

Hanya pandangan order-by-tidak memiliki ikon bintang. Komentar rangka memiliki itu meskipun. Jadi di sini adalah kode untuk menambahkan ikon bintang untuk tampilan agar-by-,

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

22. Mengubah [...] dari kutipan dengan 'Baca lebih lanjut':

Menggunakan tema Anak dan tambahkan kode berikut di user - kode didefinisikan.

<?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. Membuat sidebar abu-abu (#eee) dan putih konten utama (# fff):

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;}

gambar latar belakang 24. kustom Tetap:

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

25. Cara membuat komentar dofollow:

Di WordPress Dashboard -> Appearance -> Editor
Buka file comment.php (Rekomendasi: tema Gunakan anak, menyalin file comment.php dari folder induk tema ke folder tema anak) dan mengganti

atom()->getAuthorAsLink()

dengan

atom()->getAuthorAsLink('dofollow')

26. Perubahan penampilan "Tampilkan Lebih" tombol:

Secara default "Show More" tombol tidak mudah terlihat, penggunaan kode berikut untuk membuatnya mudah terlihat.

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

Jika Anda ingin warna selain biru kemudian mengubah nilai # 0997e1 untuk apa pun yang Anda inginkan.

27. Perubahan tampilan gambar yang menunjukkan jumlah komentar pada homepage:

Modified Comments Image Mystique

Pertama, download dan menambahkan icons.png file gambar ke folder Gambar Mystique Anda (tema / 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;
}

Jangan lupa untuk mengubah "URL SITUS ANDA DI SINI" teks ke URL situs Anda yang sebenarnya.

28. Tambahkan perbatasan transparan ke meja:

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

29. Kurangi ukuran setiap pos pos:

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

nilai asli adalah 300%, menyesuaikan nilai sesuai dengan kebutuhan Anda.

30. Untuk posting tunggal untuk menampilkan gambar tanpa menutupi sidebar:

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

Sesuaikan lebar maksimal dengan preferensi Anda bagi siapa saja yang ingin.

31. Pindahkan tagline bawah judul:

#logo{
  float:none;
}

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

32. Bagaimana menambahkan Google +1 Button Mystique 3.0+ Navigation Bar:

Di bawah WordPress Dashboard -> Appearance -> Editor
Dalam Template Kolom mencari "footer.php" file.
Dalam pencarian file footer.php untuk tag dan menambahkan kode sebelum tag body berikut:

<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>

Kemudian di bawah WordPress Dashboard -> Appearance -> pengaturan Mystique
Pada tab Advanced -> "code User-didefinisikan".

<?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

Sekarang Anda akan melihat tombol Google+ di navbar Mystique Anda. Anda dapat mengulangi prosedur yang sama untuk menambahkan tombol Facebook Like.

33. Bagaimana menambahkan Cari di Mystique 3.0+ Navigation Bar:

di bawah WordPress Dashboard -> Appearance -> pengaturan Mystique
Pada tab Advanced -> "code User-didefinisikan".

<?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>';
}

Dan tambahkan kode berikut dalam pengaturan Mystique -> tab CSS

/* 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. Cara Mengubah Halaman Style:

Jika Anda ingin mengubah tampilan halaman rumah dan ingin menunjukkan hanya post thumbnail dan judul posting kemudian membuat file baru dan beri nama teaser.php ke file di folder tema anak Anda, tambahkan kode di dalam teaser.php berikut:

<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>

Kemudian pada pengaturan Mystique -> tab CSS tambahkan kode berikut:

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%;
}

35. Bagaimana Tambahkan Breadcrumbs:

Kami sarankan Anda untuk menambahkan Breadcrumbs ke Tema Mystique Anda. Ini adalah tambahan yang sangat baik untuk desain karena kegunaan dan juga memberikan manfaat SEO karena link ke jalan sehingga meningkatkan aktivitas bot di halaman pengindeksan. Remah roti menyediakan cara untuk dengan mudah menavigasi melalui situs, dari pos, kategori, untuk posting berikutnya, atau dari halaman anak, untuk orang tua halaman dll

Pertama, Anda perlu men-download RDFa Breadcrumb Plugin upload dan mengaktifkannya seperti biasa. Jika Anda menggunakan WordPress SEO oleh Yoast maka metode yang diberikan di bawah ini untuk menambahkan breadcrumbs menggunakan WordPress SEO.

Catatan: Aktifkan Mystique Anak Tema (Mystique-Memperpanjang), kemudian di bawah WordPress Dashboard -> Appearance -> Pengaturan Mystique -> Advanced, cari kode User-didefinisikan dan tambahkan kode berikut:

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>';

Jika Anda telah mengaktifkan opsi remah roti (WordPress Dashboard -> SEO -> Internal Link) di WordPress SEO oleh Yoast maka bukannya menambahkan kode diatas add code di Advanced-> "kode User-didefinisikan" sebagai berikut.

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>';

Setelah menambahkan kode diatas Anda akan melihat Breadcrumb pada posting Anda sebagai berikut:

Breadcrumbs For Mystique WordPress Theme

Setelah menambahkan remah roti, di halaman hasil mesin pencari (SERP) hasil situs Anda akan terlihat seperti ini.

Breadcrumbs in SERP

Catatan: Ini akan memakan waktu sekitar 12 jam untuk 2 hari untuk menunjukkan remah roti untuk semua halaman tergantung pada bagaimana bots mesin pencari menjelajah situs Anda. Anda dapat memeriksa remah roti situs Anda di Cuplikan Kaya Alat .

Satu hal lagi, sebelumnya dan berikutnya pasca Link berguna ketika link setelah posting bukan judul posting di atas, sehingga mencari kode

<?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; ?>

Potong kode dan pasta setelah baris berikut:

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

Jika Anda ingin memodifikasi tampilan sebelumnya dan berikutnya pasca Link kemudian checkout potongan kode kelima .

36. Cara Membuat Caption Text lebih besar:

Jika Anda ingin mengubah ukuran font teks caption kemudian tambahkan kode berikut dalam pengaturan Mystique -> tab CSS

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

Di masa depan, kami akan melakukan banyak modifikasi di Mystique theme jadi kami akan terus topik ini diperbarui. Jika Anda memiliki beberapa saran atau masalah tentang potongan kode yang disediakan di sini kemudian berbagi dengan kami dalam bentuk komentar di bawah ini, kami akan mencoba untuk memecahkan masalah Anda.

Referensi: digitalnature Forum , berkat Milenko.

Jika Anda suka Modifikasi Tema Mystique ini silahkan me-retweet dan berbagi dengan teman-teman Anda di Facebook, dan Google+.