WP 5.x Shoutbox richtig einbinden (PHP & JQuery)

Hallo,

es geht hierbei um ein externes Shoutbox Plugin basierend auf PHP & JQuery.

Plugin: https://tutorialzine.com/2015/01/shoutbox-php-jquery
Demo: https://demo.tutorialzine.com/2015/01/shoutbox-php-jquery/

Ich habe die Shoutbox entpackt und im Hauptverzeichnis von Wordpress abgelegt.

assets
data
vendor
composer.json
composer.lock
index.html
load.php
publish.php

Auch habe ich die folgenden beiden .js Dateien die verlinkt waren heruntergeladen und local bei mir auf dem Webspace gehostet. Pfade sind richtig gesetzt.

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./assets/js/script.js"></script>

Anschließend habe ich den Code aus der index.html rauskopiert und in ein HTML Widget bei Wordpress eingefügt. Die index.html habe ich entfernt und so sieht das Ergbnis aus.





Die Shoutbox funktioniert aber das Design greift über auf den restlichen Blog. Das Design wird soweit ich das sehe über diese zwei Zeilen geregelt (index.html):

<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./assets/css/styles.css" />

Wie könnte ich es nun hinkriegen das das zum einen das Fenster nicht aufgeklappt ist mit Nickname und Message (siehe Demo) und das Design isolieren so das es nicht auf den restlichen Blog übergreift ?

Die Shoutbox ist wirklich ansprechend leider bietet Wordpress da nur veraltete Plugins somit wäre ich dankbar wenn mir jemand beim einbinden helfen würde. Vielleicht hat ja einer netterweise eine Idee.

Beste Grüße
timo

 

Ich kann dir nur ein Link zum Theme bieten https://penscratch2demo.wordpress.com/ da ich das über xampp local gehostet habe bei mir. erst wenn alles klappt versuche ich es online zu stellen