Externe CSS und JS durch register/enqueue einbinden - funktioniert nicht

seppo

Hallo zusammen,

ich habe eine HTML samt CSS bekommen und möchte diesen Code in eine WP-Seite über den HTML-Bereich einbinden. Das klappt auch soweit. Nun ist im Head-Bereich dieser HTML ein externes CSS und ein JQuery-Script eingebunden:

HTML

<!-- SET: STYLESHEET -->
<link href="../wp-content/test/css/mg_style.css" rel="stylesheet" type="text/css" media="all">
<link   href='https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic'  rel='stylesheet' type='text/css'>
<link href="../wp-content/test/css/mg_responsive.css" rel="stylesheet" type="text/css" media="all">
<!-- END: STYLESHEET -->


<!-- SET: SCRIPTS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<!-- END: SCRIPTS -->

Ich möchte diese beiden CSS-Dateien und die JS nun in die Function.php einbinden, so dass ich sie nutzen kann und es zu keinen Kollisionen mit Theme-Sheets und Scripten kommt. Ich habe nun ans Ende in der function.php folgendes integriert:

HTML

function meine_styles_und_scripts() {
    wp_register_style( 'mg_test_css',  get_template_directory_uri() . '/wp-content/test/css/mg_style.css' ) );
    wp_register_style( 'mg_test_css_responsive',  get_template_directory_uri() . '/wp-content/test/css/mg_responsive.css' ) );
    wp_register_script( 'mg_test_script',  get_template_directory_uri() . 'http://code.jquery.com/jquery-1.10.2.js' ) );


    wp_enqueue_style( 'mg_test_css' );
    wp_enqueue_style( 'mg_test_css_responsive' );
    wp_enqueue_script( 'mg_test_script' );


}add_action( 'wp_enqueue_scripts', 'meine_styles_und_scripts' );

Alles anzeigen

Da ich so etwas zum ersten Mal mache, denke ich, dass ich einen grundlegen Fehler einbaue.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Die CSS brauchst du mMn nicht registrieren.
Und für jquery musst du erst mal das Standard deregistrieren und dann das neue registrieren:

PHP

function meine_styles_und_scripts() {
  if(!is_admin()) {
    wp_enqueue_style('mg_test_css', get_template_directory_uri() . '/mg_style.css', array(), '', 'all' );
    wp_enqueue_style('mg_test_css_responsive', get_template_directory_uri() . '/mg_responsive.css', array(), '', 'all' );


    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.10.2.js', false, null, false );
    wp_enqueue_script( 'jquery');
  }
}
add_action('wp_enqueue_scripts', 'meine_styles_und_scripts', 1);

Alles anzeigen

seppo

Verstehe, danke! Das klappt auch soweit (zumindest die CSS)

Einziges Problem ist nun, dass durch das deregistrieren die WP-jQuerys nicht mehr gehen (z.B. Menü-Dropdown). Wenn ich es aber nicht deregistriere, funktionieren zwar die WP-jQuerys aber nicht die, die in diesem HTML aufgerufen werden

HTML

http://code.jquery.com/jquery-1.10.2.js

. Lässt sich das überhaupt miteinander "vereinbaren"?

[COLOR=#000000][COLOR=#DD0000][/COLOR][/COLOR]

maxe

warum willst du denn überhaupt 2x jquery einbinden? :shock:

seppo

Hi,

das will ich eigentlich gar nicht. Es ist so, dass ich eine einzelne Seite (HTML, CSS) von einem Entwickler bekommen habe. Dieser nutzt in seinem Html-Head die jQuery (siehe oben), um expandables in der Seite zu realisieren.

Also müssen diese dann mit dem aktuellen Theme jQuery umgesetzt werden?

maxe

Ich würde nie 2x jquery einbinden. Dann eher den Code anpassen. Poste den Code doch mal hier, wenn er nicht zu lang ist. (Vergiss dafür aber nicht die Code-Buttons hier im Forum im Erweiterten Editor.)

seppo

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<title>MG page</title>


<!-- SET: FAVICON -->
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.png">
<!-- END: FAVICON -->


<!-- SET: STYLESHEET -->
<link href="/css/mg_style.css" rel="stylesheet" type="text/css" media="all">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="/css/responsive.css" rel="stylesheet" type="text/css" media="all">
<!-- END: STYLESHEET -->


<!-- SET: SCRIPTS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<!-- END: SCRIPTS -->
</head>


<body>
        <!-- maincontent Starts -->
        <div class="mg_content">
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".mg_accordian ul li a").click(function() {
                    $(this).parent().toggleClass('active');
                    $(this).parent().find('.expand_cont').slideToggle();
                    });
                });
            </script>           
            <div class="mg_pro_cont">
            <div class="mg_container">
                <div class="mg_pro_left_cont">
                    <div class="mg_accordian">
                        <h2>10</h2>
                        <h3>Headline<span>Subheadline</span></h3>
                        <div class="clear"></div>
                        <ul>
                            <li><a><span>1</span>    <b>Lorem ipsum</b></a>
                                <div class="expand_cont">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                                </div>
                            </li>
                            <li><a><span>2</span>    <b>Lorem ipsum</b></a>
                                <div class="expand_cont">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="mg_flip">
                        <div class="mg_flip_left">
                            <h2>Headline</h2>
                            <ul>
                                <li class="flip cf"  >
                                    <a class="pic" href="#"><img src="/images/icon1.png" width="70" height="83" alt="icon">
                                        <em><span>Lorem-<br>ipsum</span></em>
                                        <b>00<span>Lorem</span></b>
                                        <small class="info" ><span>zur<br> Bilder-<br>galerie</span></small>
                                    </a>
                                </li>
                                <li   class="flip cf"  >
                                    <a class="pic"  href="#"><img src="/images/icon2.png" width="70" height="83" alt="icon">
                                        <em><span>Lorem</span></em>
                                        <b>00<span>Lorem</span></b>
                                        <small class="info" ><span>zur<br> Bilder</span></small>
                                    </a>
                                </li>
                                <li   class="flip cf"  >
                                    <a class="pic"  href="#"><img src="/images/icon3.png" width="70" height="83" alt="icon">
                                        <em><span>Lorem-<br>ipsum</span></em>
                                        <b>00<span>Lorem</span></b>
                                        <small class="info" ><span>zur Bilder</span></small>
                                    </a>
                                </li>
                                <li  class="flip cf"  >
                                    <a class="pic"  href="#"><img src="/images/icon4.png" width="70" height="83" alt="icon">
                                        <em><span>Lorem</span></em>
                                        <b>00<span>Lorem</span></b>
                                        <small class="info" ><span>zur<br> Bilder-<br>galerie</span></small>
                                    </a>
                                </li>
                            </ul>
                            <div class="clear"></div>
                            <h3><span>215 gesamt</span></h3>
                        </div>
                        <div class="mg_flip_left mg_flip_rht">
                            <h2>Headline</h2>
                            <ul>
                                <li class="flip cf"  >
                                    <a class="pic" href="#"><img src="/images/icon5.png" width="70" height="83" alt="icon">
                                        <em><span>Lorem-<br>ipsum</span></em>
                                        <b>000<span>Lorem</span></b>
                                        <small class="info" ><span>zur<br> Bilder-<br>galerie</span></small>
                                    </a>
                                </li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>                
                </div>
                <!--<div class="mg_side_bar">
                    <img src="images/side_bar.png" width="215" height="978" alt="sidebar">
                </div>-->
                <div class="clear"></div>
            </div>
            </div>
        </div>            
        <!-- maincontent ends -->
</body>
</html>

Alles anzeigen

seppo

CSS

HTML

@font-face {
    font-family: 'HelveticaNormalRegularRegular';
    src: url('../fonts/helvetica-normal/helvetica-normal.eot');
    src: url('../fonts/helvetica-normal/helvetica-normal.eot') format('embedded-opentype'),
         url('../fonts/helvetica-normal/helvetica-normal.woff') format('woff'),
         url('../fonts/helvetica-normal/helvetica-normal.ttf') format('truetype'),
         url('../fonts/helvetica-normal/helvetica-normal.svg#HelveticaNormalRegularRegular') format('svg');
}


/* ----------------------- layout ----------*/
body                    { padding:0; margin:0;}
.clear                    { clear:both; font-size:1px;line-height:1px; display:block; height:0;}
.mg_container            { max-width:1150px; margin:0 auto; padding:0;}
/*-------------------------------------------*/


/* ------------------------ MIAN CONTENT HERE --------------*/
.mg_content                { background:url(../images/gradiant_bg.png) repeat; width:100%; padding:0;}
.mg_pro_cont            { width:100%; padding:0; }
.mg_pro_left_cont        { float:left; margin:0; padding:39px 0 0 0; display:block; width:827px;  }


.mg_accordian            { margin:0 0 160px 0; display:block; }
.mg_accordian h2        { float:left; margin:0; padding:0 20px 0 30px; font-family: 'Droid Serif', serif; font-size:160px; color:#7c4d2b; line-height:160px;
font-weight:700; font-style:italic; }
.mg_accordian h3        { float:left; margin:0; padding:53px 0 0 0; font-family: 'Droid Serif', serif; font-size:60px; color:#7c4d2b; line-height:60px; font-style:italic;}
.mg_accordian h3    span    { font-family: 'Droid Serif', serif; font-size:28px; color:#6f787b; line-height:28px; display:block; padding:0 0 0 77px; font-style:italic; }


.mg_accordian ul    { display:block; margin:0 0 0 9.5%; width:82.4%; padding:28px 0 0 0; }
.mg_accordian ul li    { display:block; margin:0; padding:12px 0 0 0; border-bottom:solid 1px #6e787a; list-style-type:none; }
.mg_accordian ul li a    { font-family: 'Droid Serif', serif; font-size:20px; color:#6f787b; line-height:20px; font-weight:400; padding:0 0 7px 0; display:block; font-style:italic; text-decoration:none; cursor:pointer;}
.mg_accordian ul li a span                { width:45px; text-align:right; font-size:40px; line-height:40px; font-weight:700; display:inline-block; margin:0 25px 0 0; padding:0; text-decoration:none; }


.mg_accordian ul li a b    { font-weight:400; text-decoration:none; }


.mg_accordian ul li:nth-last-child(1)    { border-bottom:0 none; }


.mg_accordian ul li .expand_cont    { padding:0 10px 22px 72px; display:none;  }
.mg_accordian ul li .expand_cont p    { font-family: 'HelveticaNormalRegularRegular'; font-size:13px; line-height:17px; color:#6f787b; padding:0; margin:0;  }
.mg_accordian ul li.active a        { color:#7c4d2b; }


.mg_flip        { padding:0 0 120px 0; margin:0;  }
.mg_flip_left    { float:left; margin:0; padding:0; width:604px;  }
.mg_flip_left h2    { font-family: 'Droid Serif', serif; font-size:24px; color:#6f787b; line-height:24px; font-weight:700; font-style:italic; text-align:center; padding:0 0 16px 0; }


.mg_flip_left h3    { border-top:solid 1px #6e787a; padding:0; margin:0; text-align:center;  }
.mg_flip_left h3 span    { font-family: 'Droid Serif', serif; font-size:20px; color:#6f787b; line-height:20px; font-weight:700; font-style:italic;
 background:url(../images/gradiant_bg.png) repeat; display:inline-block; padding:0 14px 0 14px; margin:-11px 0 0 0; }


.mg_flip_left ul                    { border-top:solid 12px #6e787a; display:inline-block; width:100%; float:left; margin:0 0 33px 0; padding:0;}
.mg_flip_left ul li                    { float:left; margin:0 6.5px 0 0; padding:0; position:relative; list-style-type:none; }




.mg_flip_left ul li a                {   width:146px; background:#ffffff;  padding:9px 0 28px 0; display:block;  position:relative; z-index:999999999999; text-decoration:none; border:0 none; outline:none; }
.mg_flip_left ul li a img            { display:block; margin:0 auto; padding:0; border-bottom:0 none !important; }
.mg_flip_left ul li a em            { height:57px; width:81%;  margin:0 auto 20px; padding:0 0 8px 0; border-bottom:solid 1px #6f787a; display:table;  }
.mg_flip_left ul li a em span        { width:100%; height:100%; text-align:center; vertical-align:middle; font-family: 'Droid Serif', serif; font-size:20px; color:#b3a16c; line-height:22px; font-weight:700; font-style:italic; display:table-cell; }


.mg_flip_left ul li a b                { font-family: 'Droid Serif', serif; font-size:50px; color:#6f787b; line-height:50px; font-weight:700; font-style:italic; text-align:center; display:block;}
.mg_flip_left ul li a b span        { width:100%; font-size:20px; line-height:20px; color:#6f787b; display:block; padding:0; margin:-4px 0 0 0;}


.mg_flip_left ul li a small            { width:100%; height:272px; position:absolute; left:0; top:0; background:#b3a16c; display:table;}
.mg_flip_left ul li a small span        { display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; font-family: 'Droid Serif', serif; font-size:20px; color:#ffffff; line-height:26px; font-weight:700; font-style:italic;  }




.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


.flip         { perspective: 800px; }
.flip .info { transition: all 0.8s; opacity:0; transform-style: preserve-3d; }
.flip .info { transform: rotateY(180deg); } /* Flip the text: Will be flipped back when animated */
.flip .pic { transition: all 0.8s; backface-visibility: hidden; z-index:99999; transform-style: preserve-3d; }
.flip:hover .info { transform: rotateY(180deg);  opacity:1;   }
.flip:hover .pic { transform: rotateY(180deg); }


.mg_flip_left ul li:nth-last-child(1)    { margin:0; }


.mg_flip_rht    { width:195px; float:right; }
.mg_flip_rht ul li    { width:100%; }
.mg_flip_rht ul li a    { width:100%; }




.mg_side_bar    { float:right; width:323px; background:url(../images/divider.png) no-repeat 8% 42px;  }
.mg_side_bar img    { display:block; margin:0 auto; padding:0; }
/* ---------------------------------------------------------*/

Alles anzeigen

maxe

der jquery Schnipsel hätte gereicht :-P
Du könntest mal das Script mit folgendem ersetzen, das könnte dann mit dem WP jQuery funktionieren:

Code

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery(".mg_accordian ul li a").click(function() {
      jQuery(this).parent().toggleClass('active');
      jQuery(this).parent().find('.expand_cont').slideToggle();
     });
   });
</script>

seppo

Hi,

ich habe in die Header.php nun das eingebunden:

HTML

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/mg_style.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/mg_responsive.css">
<script type="text/javascript" src="<?php echo  get_template_directory_uri();  ?>/js/jquery-1.11.3.min.js"></script>

Und habe die jQuery 1.11.3 in den JS geladen. Die alte 1.8.... habe ich gelöscht. Funktioniert jetzt alles einwandfrei.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Externe CSS und JS durch register/enqueue einbinden - funktioniert nicht

Jetzt mitmachen!