Antworten auf deine Fragen:
Neues Thema erstellen

Frage zur style.css in WordPress

D

dn3d_fanboy

Aktives Mitglied

Hallo,

muss die style.css eines Themes zwingend im Hauptordner des Themes liegen, oder kann ich WordPress beibringen, meine styles.css Datei im Ordner /css zu benutzen?

Für eure Hilfe danke ich euch im Voraus.
 
rodemund

rodemund

:)

AW: Frage zur style.css in WordPress

Klar kannst du in WordPress deine CSS hinlegen, wohin du möchtest.
Nur die CSS mit den Theme-Informationen muss mit diesen Infos am vorgesehen Ort sein, sonst fehlen diese Infos im WordPress-Backend.
Aber du kannst ja auch mehrere CSS laden.

Bei mir in Header der index.php sieht das dann in etwa so aus:

Code: 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/css/reset-css.css.php" type="text/css" media="screen" title="alternate" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/css/fsg.css.php" type="text/css" media="screen" title="alternate" />

Die erste ist eine Reset-css.
Dann kommt die "eigentliche" CSS am vorgesehenen Ort. Meine enthält meist nur die Infos, die WP für die Verwaltung des Themes braucht.
Die dritte sorgt für die eigentliche Formatierung. Das ist bei mir in diesem Fall eine PHP-Datei, die als dynamische CSS funktioniert – deswegen "*.css.php".
Eine lustige und praktische Sache, die allerdings nicht eigentlich zur gestellten Frage gehört.
 
cythux

cythux

Aktives Mitglied

AW: Frage zur style.css in WordPress

Eine Index.php und eine style.css muss immer vorhanden sein in deinen theme, genau wie mein Vorposter auch schon beschrieben hat.


So lade ich meine CSS Dateien in Wordpress Themes, dort gibt es eine script.php

PHP: 
<?php
/**
 * Scripts and stylesheets
 *
 * Enqueue stylesheets in the following order:
 * 1. /theme/assets/css/bootstrap.css
 * 2. /theme/assets/css/bootstrap-responsive.css
 * 3. /theme/assets/css/app.css
 * 4. /child-theme/style.css (if a child theme is activated)
 *
 * Enqueue scripts in the following order:
 * 1. jquery-1.9.1.min.js via Google CDN
 * 2. /theme/assets/js/vendor/modernizr-2.6.2.min.js
 * 3. /theme/assets/js/plugins.js (in footer)
 * 4. /theme/assets/js/main.js    (in footer)
 */

function DeinTheme_scripts() {
  wp_enqueue_style('DeinTheme_bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css', false, null);
  wp_enqueue_style('DeinTheme_bootstrap_responsive', get_template_directory_uri() . '/assets/css/bootstrap-responsive.css', array('DeinTheme_bootstrap'), null);
  wp_enqueue_style('DeinTheme', get_template_directory_uri() . '/assets/css/app.css', false, null);

  // Load style.css from child theme
  if (is_child_theme()) {
    wp_enqueue_style('DeinTheme_child', get_stylesheet_uri(), false, null);
  }

  // jQuery is loaded using the same method from HTML5 Boilerplate:
  // Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline
  // It's kept in the header instead of footer to avoid conflicts with plugins.
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', false, null, false);
  }

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-2.6.2.min.js', false, null, false);
  wp_register_script('DeinTheme_plugins', get_template_directory_uri() . '/assets/js/plugins.js', false, null, true);
  wp_register_script('DeinTheme_main', get_template_directory_uri() . '/assets/js/main.js', false, null, true);
  wp_enqueue_script( 'fitvids', get_template_directory_uri() . '/assets/js/vendor/jquery.fitvids.min.js', array( 'jquery' ), '1.1' );
  wp_enqueue_script('jquery');
  wp_enqueue_script('modernizr');
  wp_enqueue_script('DeinTheme_plugins');
  wp_enqueue_script('DeinTheme_main');
}

add_action('wp_enqueue_scripts', 'DeinTheme_scripts', 100);

so sieht das dann bei mir in der function.php aus

PHP: 
<?php
/**
 * Required by WordPress.
 *
 * Keep this file clean and only use it for requires.
 */

require_once locate_template('/lib/scripts.php');         // Scripts and stylesheets
so sieht meine style.css im theme_root aus, das Ausrufezeichen ist ein kleiner
fix, wenn ich mit SASS/SCSS oder less arbeite. Damit diese nicht als style.css.min ohne /* Kommentare */ dargestellt wird

Code: 
/*!
Theme Name:        
Theme URI:          
Description:         
Version:            
Author:             
Author URI: 
Tags :         
License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/
 
D

dn3d_fanboy

Aktives Mitglied

AW: Frage zur style.css in WordPress

Danke für eure Hilfe.
ich habe jetzt mal den Code geschrieben, aber noch nicht getestet.
Habe ich die Stylesheets jetzt korrekt eingebunden.

Und was ist mit den .js - Dateien? Kann ich die einfach mit dem Verweis auf den Link einbinden oder mus ich das auch über einen Wordpress-Befehl machen?

Hier mal der Code der header.php:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="language" content="de-de" />
  <meta name="Author"  content="" />
  <meta name="Robots" content="index, follow" />
  <meta name="Googlebot" content="index, follow" />
  <meta name="Revisit-after" content="5" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  
  <title><?php wp_title(''); ?></title>
  
[B] [COLOR=DarkRed]   <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>" media="all" charset="utf-8" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>css/styles.css" type="text/css" media="screen" title="alternate" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>css/nivo-slider.css" type="text/css" media="screen" title="alternate" />[/COLOR][/B]
    
    <link rel="alternate" type="application/rss+xml" title="RSS-Feed" href="<?php bloginfo('wpurl'); ?>/feed/" />
    <link rel="pingback" href="<?php bloginfo('wpurl'); ?>/xmlrpc.php" />
  
[B] [COLOR=DarkRed]   <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>[/COLOR][/B]
    
    <?php wp_head(); ?>

</head>

[COLOR=DarkRed][B]<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script[/B]>[/COLOR]

<body>

    <div id="wrapper">
    
        <div id="header">
        
            <div id="header-logo-box">
            
                <div id="logo"></div>
            
            </div>
            
            <div id="header-logo-box-shadow"></div>
        
        </div>
        
        <div id="main" class="clearfix">
<!-- Ende header.php   --->
 
Zuletzt bearbeitet:
D

dn3d_fanboy

Aktives Mitglied

AW: Frage zur style.css in WordPress

rodemund schrieb:
Klar kannst du in WordPress deine CSS hinlegen, wohin du möchtest.
Nur die CSS mit den Theme-Informationen muss mit diesen Infos am vorgesehen Ort sein, sonst fehlen diese Infos im WordPress-Backend.
Aber du kannst ja auch mehrere CSS laden.

Bei mir in Header der index.php sieht das dann in etwa so aus:
[...]
Zum Vergrößern anklicken....

Danke rodemund,
das funktionierte schonmal super. Die Seite wird in Wordpress genauso dargestellt, wie meine HTML-Version.

Trotzdem nochmal meine Frage:
wie binde ich denn .js-Dateien ein (ich will z.B. eine jQuery-Version im Theme mitliefern und diese im Header einbinden.
 
rodemund

rodemund

:)

AW: Frage zur style.css in WordPress

dn3d_fanboy schrieb:
Danke rodemund,
das funktionierte schonmal super.
Zum Vergrößern anklicken....
Prima! :)
dn3d_fanboy schrieb:
Trotzdem nochmal meine Frage:
wie binde ich denn .js-Dateien ein (ich will z.B. eine jQuery-Version im Theme mitliefern und diese im Header einbinden.
Zum Vergrößern anklicken....
Bei mir sieht's entsprechend so aus:
Code: 
        <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.tinyscrollbar.js"></script>
        <link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo( 'template_url') ?>/favicon.ico" />
... halt wieder mit diesen unheimlich praktischen "bloginfo( 'template_url')"-PHP-Schnipseln.

Die jquery.js liegt dabei natürlich in einem Ordner "js" im Ordner des Templates - aber darauf bist du sicherlich schon selbst gekommen.

Ach ja - und die Zeile für das favicon hab ich gleich dringelassen. Falls das nun die nächste Frage gewesen wäre :)
 
Zuletzt bearbeitet:
cythux

cythux

Aktives Mitglied

AW: Frage zur style.css in WordPress

Js / CSS Dateien habe ich bei mir in der Script.php datei ebenfalls drin wie oben zu sehen im Code snippet.
dies geht natürlich auch in der function.php.
und für den Head Bereich kannst du die auch einen Robot.txt nutzen
 
D

dn3d_fanboy

Aktives Mitglied

AW: Frage zur style.css in WordPress

rodemund schrieb:
Prima! :)

Die jquery.js liegt dabei natürlich in einem Ordner "js" im Ordner des Templates - aber darauf bist du sicherlich schon selbst gekommen.

Ach ja - und die Zeile für das favicon hab ich gleich dringelassen. Falls das nun die nächste Frage gewesen wäre :)
Zum Vergrößern anklicken....

Danke rodemund,
deine Tipps haben mir sehr geholfen und alles funktioniert einwandfrei.
Und ja, auf das favicon wäre ich auch noch zurükgekommen :D.

Danke nochmal.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 147 (Mitglieder: 7, Gäste: 140)
Robots: 831

Statistik des Forums

Themen
118.635
Beiträge
1.538.461
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben