2017-04-11 6 views
0

Ich bin ein bisschen neu in Wordpress und CSS, ich hoffe, Sie können mir helfen. Ich möchte die Position des Sitelogo .site-branding aller Beiträge in einer bestimmten Kategorie ändern.Ändern CSS von Posts in einer Kategorie in Wordpress

Ich kann die site-branding in meiner style.css nach meinem Geschmack ändern, aber es betrifft die gesamte Website einschließlich aller Seiten, Beiträge und Kategorien.

.site-branding { 
    left: 50%; 
    position: absolute; 
    top: 40%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 

Ich hoffe, ihr könnt mir helfen.

Vielen Dank im Voraus.

+0

Bitte senden Sie einen Link oder etwas von der Quelle (html/code) in einem Geige. – dutchsociety

+0

Sie sollten eine bestimmte Kategorieseite nach der Klasse im Hauptteil ausrichten können. Angenommen, Sie verwenden body_class() in Ihrem Design. –

Antwort

0

Sie werden wahrscheinlich Javascript und Jquery dafür benötigen.

Also, wenn dies Ihre URL-Struktur: www.mysite.com/home/category/,

(function($){ 
var $pathArray = window.location.pathname.split('/'); 
var $location = pathArray[2] 
var $branding = $(".site-branding") 
if ($location == 'cat1' || $location == 'cat2') { 
    $branding.css({ 
     'left' : '50%', 
     'position' : 'absolute', 
     'top' : '40%', 
     '-webkit-transform' : 'translate(-50%, -50%)', 
     '-ms-transform' : 'translate(-50%, -50%)', 
     'transform' : 'translate(-50%, -50%)' 
    }); 
} 
}); 

Angenommen, Sie auf Ihrer Wordpress-Instanz ein Kind Thema laufen (was, wenn Sie nicht, Sie auf jeden Fall sollte) Sie können dieses Skript am Ende der Datei header.php hinzufügen.

0

Dafür denke ich, dass Sie eine PHP-Bedingung in Ihrer header.php hinzufügen müssen, die überprüft, ob der aktuelle Beitrag in dieser bestimmten Kategorie ist, und fügen Sie dann eine andere Klasse zu Ihrem Logo-Tag, das seine Position ändert.

Wäre so etwas wie dieses:

<h1 class="site-branding <?php in_array(YOUR_CATEGORY_ID, get_the_category((get_the_ID())) ? ' new-posision' : '' ; ?>"></h1> 
0

Wordpress Kategorie als Klasse Body-Tag hinzufügen. Wenn es so für Ihr Thema ist, können Sie eine bestimmte CSS-Regel für die Kategorie hinzufügen.

.category .site-branding { 
    /* your css rules here */ 
} 
1

Wordpress gibt Ihnen die Möglichkeit, die Kategorie zu zielen, den Namen Ihr Stylesheet (in der Regel „Kategorie-x“) hinzufügen und dann können Sie eindeutig jegliche und alle Kategorien in Ihrem CSS-Ziel.

Here's a great step by step article for targeting this class in your css.

könnte ein Beispiel sein:

<body class="archive category category-agriculture category-40"> 

Mit Kategorie-Landwirtschaft ist die Klasse, die Sie wie so ausrichten möchten:

body.category-agriculture .site-branding {color: red;} 
1

Danke für die Mühe, aber ich habe ein wenig Hilfe hatte und behebt das Problem.

Ich habe diesen Filter, um meine functions.php

function pn_body_class_add_categories($classes) { 

// Only proceed if we're on a single post page 
if (!is_single()) 
    return $classes; 

// Get the categories that are assigned to this post 
$post_categories = get_the_category(); 

// Loop over each category in the $categories array 
foreach($post_categories as $current_category) { 

    // Add the current category's slug to the $body_classes array 
    $classes[] = 'category-' . $current_category->slug; 

} 

// Finally, return the $body_classes array 
return $classes; 
} 
add_filter('body_class', 'pn_body_class_add_categories'); 

Das Filter den Kategorienamen als Klasse der body auf einzelne Beiträge hinzufügen.

Wenn beispielsweise die Kategorie News heißt, fügt sie dem Textkörper als Klasse für einzelne Posts hinzu.

Sobald das erledigt ist, können Sie diesen Körper Klasse verwenden, um nur .site-branding auf einzelnen Posten in der Kategorie News wie dieses Ziel:

.single.category-news .site-branding { 
left: 20%; 
} 
Verwandte Themen