Jak zmodyfikować Mystique 3.0+ WordPress Theme

Mystique 3.0 WordPress ma wiele wbudowane funkcje, ale wciąż ludzie szukają zmian Mystique, które zaspokoją nie potrzebuje.

A+ A-

W naszym wcześniejszym artykule omówiliśmy 50 Most Wanted Mystique Modyfikacje tematu, Hacks . Ze względu na ogromny popyt przez naszych kochanych czytelników o zmianach w Mystique 3,0 i ogromną reakcję na poprzednim artykule, tutaj publikujemy Most Wanted Mystique 3.0+ Modyfikacje, Hacks. Dostosuj Mystique jak na swój wybór.

Uwaga: Jeśli nie jesteś zaznajomiony z rzeczy kodowania, to nie ma potrzeby, aby edytować jednej linii kodu, zamówienie Modified Mystique - MystiqueRevised .

Fragmenty kodu do modyfikowania Mystique:

Uwaga: Aby zmodyfikować Mystique WordPress Theme trzeba dodać następujący kod w obszarze Wygląd -> Mystique -> CSS lub na karcie Zaawansowane. Zaleca się, aby zawsze zainstalować motyw Mystique dziecka, dzięki czemu nie straci żadnych modyfikacji kiedy będzie zaktualizować motyw.

1. pozycję strony w tytule Logo Ustaw:

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

Gdzie 25px jest przestrzeń nad tytule strony i 2px jest przestrzeń pod tytułem serwisu lub logotypów.

Tytuł 2. Zmiana strony kolor:

#logo a {
color: #E0E0E0;
}

Zmień wartość E0E0E0 jeśli chcesz inny kolor.

Jeśli chcesz, aby tytuł strony zgodnie z naszym wyborem a następnie dodać następujący kod:

#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. Zmiana koloru najechania na tytuł bloga:

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

Zmień wartość CECECE jeśli chcesz inny kolor.

4. Zwiększ rozmiar Tytuł strona tekstu:

Aby zwiększyć rozmiar tekstu tytułowej stronie użytku następujący kod. Regulacja wartości 350 odpowiednio.

#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. Ustaw przestrzeń pomiędzy pasku nawigacji i zawartości:

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

Ustawić wartość 18 w zależności od potrzeb.

7. Dołącz pasek nawigacyjny z głównej zawartości:

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

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

Join Navigation Bar - Mystique Theme Modifications

8. Tytuły Włącz widget do małych liter:

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

9. zmienić domyślny rozmiar czcionki tekstu wewnątrz wpisu:

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

10. Granica dla każdego postu:

Niektórzy ludzie lubią dodać ramkę do każdego posta, oto kod, aby to zrobić,

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

Border For Each Post

11. Zmień czarnym tle:

W Mystique, domyślne tło jest czarne można go zmienić na inny. Tutaj daliśmy niebieski jako przykład. Zamiast niebieskiego można użyć wartości koloru jako #CECECE lub jakiejkolwiek innej wartości, które chcesz.

body{background-color:blue;}

12. Alternatywny header image:

Aby użyć następującego nagłówka obrazu dodać pod obrazem danego kodu.

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

Jeśli używasz motywu dziecka następnie podać pełną ścieżkę obrazu. Na przykład, jak używam motywu dziecka Dodałem następujący kod,

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

13. Centrum obraz logo w nagłówku:

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

Center Logo

14. Przesuń w górę ikony social media:

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

Dostosuj wartość 30px do tego, co chcesz.

Move Up Social Media Icons

15. Wyświetlacz liczba wyświetleń wpisu:

Jak Milenko (Temat Developer) powiedział w swoim forum, widoki pocztowe zostały już wdrożone, ale domyślnie wyłączone, ponieważ na dużych witrynach nagrywania widoki post (tj. Aktualizacji bazy danych za każdym razem, a zwiedzających ogląda stronę) może mieć wpływ na wydajność.
Jeśli chcesz włączyć licznik Zobacz post otwórz plik functions.php z folderu motywu dziecka (powinny być mistyka-przedłużyć) i dodać:

define('ATOM_LOG_VIEWS', true);

Następnie użyj go gdziekolwiek chcesz w szablonach, na przykład w teaser.php (kopia oryginału do katalogu tematycznego dzieci) poszukaj następującego kodu:

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

następnie dodać następujący kod poniżej powyższego kodu:

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

No of Views

Wewnątrz widgety, jak "Wiadomości" widget można widoki wyjście pocztowych za pomocą słowa kluczowego {} widoki w szablonach.

16. Wymień stron z kategoriami jak w starym hasłem:

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

Teraz dostaniesz kategorie w menu.

17. Zmiana odstępów tekstu tytułowego blog:

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

18. Jak usunąć pasek nawigacyjny z 3.0

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

Lepszym sposobem, wykorzystując motyw dziecka: skopiuj header.php do tematu dziecka i usunąć kod do nawigacji

19. Regulacja ol, ul:

Pozycje na liście pomiędzy ol, ul cięte są na lewym brzegu. Oto kod, aby dostosować te elementy

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

20. Dodać banner tuż obok 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%;
}

Gdzie 70% to "x" koordynować, 30% jest "y" koordynować. Więc po prostu zmienić: background-position: 98% 50%;
aby wyregulować pozycję banner

21. ikonę gwiazdki na zamówienie-by-widoków:

Tylko poglądy order-by-nie ma ikonę gwiazdki. Komentarz zlecenie ma go jednak. Więc tutaj jest kod, aby dodać ikonę gwiazdki na zamówienie-po-widoki,

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

22. Zmienić [...] z fragmentami z "Czytaj dalej":

Użyj motywu dziecko i dodaj następujący kod do użytkownika - zdefiniowane kodu.

<?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. Dokonaj paski boczne szary (#eee) oraz główną zawartość białych (#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;}

24. Poprawiono niestandardowy obraz tła:

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

25. Jak wprowadzać komentarze Dofollow:

W WordPress Dashboard -> Wygląd -> Edytor
Otwórz plik Comment.php (zalecenie: Temat Wykorzystanie dziećmi, skopiuj plik Comment.php z folderu nadrzędnego motyw do folderu motywu dziecka) i zastąpić

atom()->getAuthorAsLink()

z

atom()->getAuthorAsLink('dofollow')

26. Zmiana wyglądu "Pokaż więcej" przycisk:

Domyślnie "Pokaż więcej" przycisk nie jest wyraźnie widoczna, wykorzystanie poniższy kod, aby to dobrze widoczne.

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

Jeśli chcesz inny kolor niż niebieski następnie zmień wartość # 0997e1 do tego, co chcesz.

27. Zmień wygląd obrazu, który pokazuje liczbę komentarzy na stronie:

Modified Comments Image Mystique

Najpierw pobierz i dodaj icons.png plik obrazu do folderu obrazu Mystique (Motywy / Mystique / 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;
}

Nie zapomnij zmienić "adresu URL strony TUTAJ" tekst do rzeczywistej zawartości witryny.

28. Dodaj przezroczyste obramowania do tabel:

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

29. Zmniejszenie rozmiaru każdej pozycji postu:

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

pierwotna wartość wynosi 300%, ustawić wartość w zależności od potrzeb.

30. W przypadku pojedynczych stanowisk w celu wyświetlania obrazów bez pokrycia paska bocznego:

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

Regulacja max-width do własnych preferencji dla każdego, kto chciał.

31. Przesuń tagline pod tytułem:

#logo{
  float:none;
}

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

32. Jak dodać Google +1 przycisk na pasku nawigacyjnym Mystique 3.0+:

Pod WordPress Dashboard -> Wygląd -> Edytor
W kolumnie Szablony poszukaj "footer.php" pliku.
W footer.php poszukiwaniu plików dla oznakować i dodaj następujący kod przed tagiem ciała:

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

Następnie pod WordPress Dashboard -> Wygląd -> Ustawienia Mystique
W zakładce Zaawansowane -> "kod zdefiniowany przez użytkownika".

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

Teraz zobaczysz przycisk Google+ na Mystique paska nawigacyjnego. Można powtórzyć tę samą procedurę, aby dodać przycisk Facebook podobne.

33. Jak dodać Szukaj w Mystique 3.0+ paska nawigacyjnego:

pod WordPress Dashboard -> Wygląd -> Ustawienia Mystique
W zakładce Zaawansowane -> "kod zdefiniowany przez użytkownika".

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

I dodaj następujący kod w ustawieniach Mystique -> zakładka 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. Jak zmienić stronę Home Style:

Jeśli chcesz zmienić wygląd strony domu i chcesz pokazać tylko poczta miniaturę i tytuł postu następnie utworzyć nowy plik i podać nazwę teaser.php do pliku w folderze motywu dziecka, należy dodać następujący kod wewnątrz teaser.php:

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

Następnie w ustawieniach Mystique -> zakładka CSS dodaj następujący kod:

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. Jak dodać Breadcrumbs:

Zaleca się, aby dodać Breadcrumbs do Mystique. Jest to bardzo dobry dodatek do projektu ze względu na użyteczność, a także przynosi korzyści w pozycjonowaniu, ponieważ linki do drogi stąd zwiększenie aktywności bot w widoku indeksowania. Bułka tarta stanowić sposób na łatwe poruszanie się po stronie, ze stanowiska do kategorii, do następnego posta, lub ze strony dziecka, do strony macierzystej etc.

Najpierw musisz pobrać wtyczki RDFa breadcrumb przesyłanie i aktywować go jak zwykle. Jeśli używasz WordPress SEO by Yoast czym metoda jest podana poniżej, aby dodać bułkę tartą z wykorzystaniem WordPress SEO.

Uwaga: Aktywacja Mystique Child Theme (Mystique-Extend), a następnie w panelu WordPress -> Wygląd -> Ustawienia Mystique -> Zaawansowane, poszukaj kodu zdefiniowane przez użytkownika i dodaj następujący kod:

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

Jeśli masz włączoną opcję bułką tartą (WordPress Dashboard -> SEO -> Internal Links) w WordPress SEO by Yoast wówczas zamiast dodawania Powyższy kod Dodaj następujący kod w Advanced-> "Kod użytkownika".

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

Po dodaniu powyższego kodu będzie można zobaczyć breadcrumb na swoim stanowisku, co następuje:

Breadcrumbs For Mystique WordPress Theme

Po dodaniu bułkę tartą, na stronach wyników wyszukiwania (SERP) wyniki witryna będzie wyglądać następująco.

Breadcrumbs in SERP

Uwaga: To zajmie około 12 godzin do 2 dni, aby pokazać okruszki dla wszystkich stron w zależności od sposobu boty wyszukiwarek indeksowania witryny. Możesz sprawdzić swoje okruszki witryny w Rich Snippet narzędzia .

Jeszcze jedno, poprzednia i następna związek po to użyteczne, gdy linki są po postu zamiast powyższym tytule postu, więc szukać kodu

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

Pokrój kod i wklej Po wykonaniu linii:

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

Jeżeli chcesz zmodyfikować wygląd poprzedniej i następnej linku postu wtedy sprowadzać kodu piąty fragment .

36. Jak zrobić tekst podpisu Większe:

Jeśli chcesz zmienić rozmiar czcionki tekstu napisów następnie dodaj następujący kod w ustawieniach Mystique -> zakładka CSS

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

W przyszłości będziemy robić wiele modyfikacji w Mystique więc będziemy trzymać ten temat zaktualizowany. Jeśli masz jakieś sugestie lub problemy dotyczące fragmenty kodu, które tutaj, a następnie podzielić się nim z nami w postaci komentarzu poniżej, postaramy się rozwiązać swoje problemy.

Numer referencyjny: digitalnature Forum , dzięki Milenko.

Jeśli lubisz te Mystique Modyfikacje Theme proszę retweet i podzielić się nim z przyjaciółmi na Facebooku i Google+.