[GELÖST] Google Suche für eigene Homepage

[mikdoe]

Moin Zusammen!
Der Code in diesem Fiddle funktioniert perfekt, sieht ungefähr so aus:


Wenn ich nun exakt genau diesen Code in eine WordPress Homepage hinein kopiere...


...und die Seite aufrufe sieht das so aus:

Das Layout ist total im Ar... und in der Konsole erscheint eine Fehlermeldung.

Die Fehlermeldung erscheint zwar im Fiddle auch aber dort funktioniert es wenigstens und hat ein Layout.
Wenn man dieser Fehlermeldung nachgeht landet man z.B. auf Google search working fine but 404 for missing asset aber das bringt mich nicht weiter, weil ich keine Lösung darin erkenne.

Jemand eine Idee, woran das liegen könnte?

 

[kkapsner]

Bist du dir sicher, dass im WP das eingegebene HTML auch wirklich exakt so wieder ausgegeben wird? Es könnte ev. sein, dass da irgendwas verändert wird (z.B. der gcse-Namespace entfernt wird o.Ä.). Schau' dir einfach mal an, was da wirklich im Browser ankommt.

 

[mikdoe]

Was mir auf Anhieb auffällt ist, dass der HTML Code innerhalb einer heftigen Verschachtelung eingefügt wurde. Ich hab das mal vernünftig eingerückt:

...[code davor entfernt]...

<div id="main" class="site-main">
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
			<article id="post-xyz" class="post-xyz page type-page status-publish hentry">
				<header class="entry-header">
					<h1 class="entry-title">Testseite</h1>
				</header><!-- .entry-header -->
				<div class="entry-content">
					<gcse:search></gcse:search>
					<script>
						(function() {
							var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ID here
							var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
							gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
							'//www.google.com/cse/cse.js?cx=' + cx;
							var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
						})();
					</script>
				</div><!-- .entry-content -->
				<footer class="entry-meta">
					<span class="edit-link"><a class="post-edit-link" href="/wp-admin/post.php?post=xyz&action=edit">Bearbeiten</a></span>
				</footer><!-- .entry-meta -->
			</article><!-- #post -->
			<div id="comments" class="comments-area"></div><!-- #comments -->			
		</div><!-- #content -->
	</div><!-- #primary -->
</div><!-- #main -->

...[code danach entfernt]...

xyz hab ich zum Maskieren eingefügt.

Ist da etwas bei, was die normale Ausführung des JS stört?
Da sind Sachen bei, deren Auswirkung auf JS ich nicht kenne, wie z.B. das Tag article oder das Attribut role.

 

[kkapsner]

Dem JS, das du gezeigt hast, ist diese starke Verschachtelung völlig egal. Aber ich gehe davon aus, dass das JS von Google eine CSS-Datei läd. Diese verträgt sich wahrscheinlich nicht mit irgendeinem CSS, das auf deiner Seite eingebunden ist. Um herauszfinden, was das genau ist und wie man das lösen kann, muss man sich aber die Seite mal live ansehen.

 

[mikdoe]

Korbinian, kann ich das auch herausfinden oder hast du dafür sehr kostspielige Tools im Einsatz? Was müsste ich denn machen, um das zu checken? Würde das gern lernen, bei CSS bin ich nämlich für meine Begriffe nicht fit genug.

 

[kkapsner]

Ich nehm' dafür den DOM-Inspector vom FF... damit kann man auch schön nachprüfen, welche CSS-Selektoren für die Objekte greifen und was von was überschrieben wird.

 

[mikdoe]

Wow, cooles Tool!
Ich hab mal die Inspektor Anzeige zwischen dem Fiddle und meiner Webseite verglichen:

Links meine nicht funktionierende Webseite, rechts das Fiddle.

Was kann ein Grund dafür sein, dass hier Anweisungen aus unterschiedlichen Zeilennummern in diesem default.css gezogen werden? Bis Zeile 115 ist es noch gleich, dann kommt ein Bruch. Wie kann sowas sein?

 

[kkapsner]

Auf der rechten Seite hast du die :hover Pseudoklasse ausgelöst. Das hat mit deinen Problemen nichts zu tun.

 

[mikdoe]

Der Vollständigkeit halber für andere Suchende: das CSS von Google verhakt sich tatsächlich mit dem CSS aus dem WordPress Theme "Twenty Thirteen". Da muss man manuell eingreifen, was ich mit Korbinian vollends per PN kläre.

*verschiebe aus Allgemeines heraus*