Admidio in Wordpress einbinden

[gabischatz]

Hi, ich bin erst seit kurzem hier im Forum. Da ich gerne Admidio in Wordpress einbinden möchte, habe ich ein Plugin für selbiges geschrieben. Ich schließe aber jegliche Garantie aus, da ich das Plugin nur auf der Webseite des Spielmannszug der Stadt Bad Langensalza e.V. http://lspz.de getestet habe. Ich wünsche aber jedem der es installiert viel Freude. Zu finden ist das Plugin auf http://gabischatz.bplaced.net/admidio-i ... einbinden/. Dort ist auch ein WP-Theme für Admidio zu finden.
Für Informationen zu Fehlern oder Vorschlägen bin ich jeder Zeit offen.
Ich wünsche allen einen Weihnachtsmann, mit vielen Geschenken und schöne Feiertage.
Mit freundlichen Grüßen
Lutz Müller

[fasse]

Hallo Lutz,

das klingt sehr interessant. Hast du vielleicht Interesse deinen Artikel bei uns im Wiki einzubinden. Dort haben wir bereits einen Artikel zur Joomla-Integration.

Viele Grüße
Fasse

[gabischatz]

Hallo Lutz,

das klingt sehr interessant. Hast du vielleicht Interesse deinen Artikel bei uns im Wiki einzubinden. Dort haben wir bereits einen Artikel zur Joomla-Integration.

Viele Grüße
Fasse

Ja das habe ich, eine entsprechende Datei befindet sich bereits in der zip-Date, wenn du das für mich machen würdest.
http://gabischatz.bplaced.net/wp-conten ... rapper.zip
Grüße

[fasse]

Hallo Lutz,

irgendwie stelle ich mich jetzt doof an. Ich bekomme deine Datei nicht entpackt. Es entsteht daraus eine admidio-wrapper.zip.cpgz und dann wieder die zip und so weiter ...

Da wir gerade mit der Beta zur 3.1 stark beschäftigt sind, wäre es eine gute Unterstützung, wenn du die Seite bei uns im Dokuwiki anlegen könntest. Rechte bekommst du, wenn du mir deinen Wiki-Loginnamen zuschickst.

Falls es bei dir nicht passt, mache ich das, allerdings wird das noch ein bischen dauern.

Viele Grüße
Fasse

[gabischatz]

Hi fasse, ich kann mich leider nicht im Wiki einloggen. Hier ist der fertige Text und hier der Plugin-Code. http://gabischatz.bplaced.net/code/plug ... r_code.htm Admidio sollte in den Organisationseinstellungen auf das WP-Theme umgestellt werden, ansonsten passt es optisch nicht zu WordPress, da es hier bereits auch schon Navigationsleisten gibt.
http://gabischatz.bplaced.net/wp-conten ... p-utf8.zip

Code: Alles auswählen

<div id="page">
<div><img class="img_border" src="http://www.admidio.org/images/border_top.png" alt="border top" /></div>
<div id="content" class="content">
    <h2 class="sectionedit1"
        id="admidio_in_wordpress_einbinden">Admidio in Wordpress einbinden</h2>

    <div class="level2">

        <p>Ziel dieser Beschreibung ist es Admidio ohne gro&#223;e Kenntnisse von <abbr title="HyperText Markup Language">HTML</abbr> oder PHP in eine bestehende oder
        neu aufzusetzende Wordpress-Installation zu integrieren. Wordpress ist ein sehr m&#228;chtiges Tool um Homepages bzw. Blocks aufzubauen, aber mit ein wenig Einarbeitung kann
        man  mit dem <a href="http://gabischatz.bplaced.net/admidio-in-wordpress-einbinden/"><strong>Admidio-Wrapper</strong></a>
		 sehr einfach die Funktionen von Admidio in eine Homepage integrieren. Neben Admidio lassen sich noch leicht andere Inhalte einbauen.</p>

        <p>Die Installation von Wordpress ist vergleichbar mit der von Admidio. Man ben&#246;tigt Webspace, und eine Datenbank. Auf die Installation von Wordpress wird
        hier nicht n&#228;her eingegangen, dazu gibt es viele ausf&#252;hrliche Anleitungen im Internet.</p>

        <p>Vorweg noch eines, man sollte nat&#252;rlich Wordpress bereits installiert haben, da man sonst Admidio nicht in Wordpress einbinden kann.</p>

        <p><strong>WICHTIG:</strong> Admidio sollte in den Organisationseinstellungen auf das <a href="http://gabischatz.bplaced.net/wp-content/uploads/2015/12/wp-utf8.zip"><strong>WP</strong>-Theme</a> umgestellt werden, ansonsten passt es
        optisch nicht zu Wordpress, da es hier bereits auch schon Navigationsleisten gibt.</p>

        <p>Nach der erfolgreichen Installation von Wordpress befindet man sich auf dem Dashboard, in der Adminebene.
Um nun z.B. die Ank&#252;ndigungen von Admidio als News auf die neu erstellte Homepage zu integrieren, geht man wie folgt vor:</p>
		<h3>Manuelle Installation</h3>
		<ol>
		   <li class="level1">
                <div class="li">Um ein Plugin manuell zu installieren, muss man es sich (meist) von der Seite des Autors herunterladen.
				</div>
           </li>
		   <li class="level1">
                <div class="li"> Da es sich in den meisten Fällen um ZIP-Dateien handelt, entpackt man diese und lädt dann das Plugin per FTP-Programm in den Ordner wp-content/plugins hoch.
				</div>
           </li>
		</ol>
<p>Bei manchen Plugins muss man einen kompletten Ordner hochladen, bei anderen reicht eine Datei. Hierzu liest man am besten die Anleitung des Plugin-Autors auf der begleitenden Website oder in der Datei liesmich.txt oder readme.txt, die meistens in dem ZIP-Paket mit enthalten sind.
 </p>
<p> Oder </p>
<h3>Halbautomatische Installation einer Zip-Datei</h3>
<p>Nur halbautomatisch, allerdings nicht manuell, erfolgt die Installation eines Plugins, das man als ZIP-Datei vorliegen hat. Dies ist der Fall, wenn es beim Entwickler des Plugins eine Zip-Datei zum Herunterladen gab. Aber wie bekommt man die nun in seine WordPress-Installation?</p>
         <ol>
            <li class="level1">
                <div class="li">
                    du gehst auf dem <strong>Dashboard</strong>, im Men&#252; auf <strong>Plugins</strong> dort auf <strong>Installieren</strong>
                </div>
            </li>

            <li class="level1">
                <div class="li">
                    nun auf <strong>Plugin hochladen</strong>
                </div>
            </li>
			<li class="level1">
                <div class="li">Nach dem Hochladen wechselt man zu dem Menüpunkt Plugins/Plugins und aktiviert dort das Plugin, indem man den Link &bdquo;<strong>Aktivieren</strong>&ldquo; anklickt.
				</div>
           </li>
		 </ol>
<h3>Plugin einstellungen</h3>
		 <ol start="4">
            <li class="level1">
                <div class="li">
                    Nun kannst du auf dem <strong>Dashboard</strong>, im Men&#252; auf <strong>Einstellungen</strong>, den Men&uuml;punkt <strong>WP Admidio  Wrapper</strong> anklicken.
                </div>
            </li>

            <li class="level1">
                <div class="li">
				   W&auml;hle jetzt das Protokoll deiner Seite aus.
                </div>
            </li>

            <li class="level1">
                <div class="li">Unterhalb f&#252;gst du die Url f&#252;r die Admidio Schnittstelle <em>Ank&#252;ndigungen</em> ein.<br />
                    Z.B. <a href="#urlextern"
                         	 id="urlextern"
                         	 class="urlextern"
                         	 title="http://www.deineurl.de/admidio/adm_program/modules/announcements/announcements.php"
                         	 rel="nofollow">www.deineurl.de/admidio/adm_program/modules/announcements/announcements.php</a>
                </div>
            </li>

		   <li class="level1">
                <div class="li">
					 <strong>Einbinden in Seite</strong>, hier wählen Sie eine Wordpress-Seiten aus, auf der Admidio angezeigt werden soll.
				</div>
           </li>

		   <li class="level1">
                <div class="li">
                Mit <strong>Breite, Höhe Rahmen und Scrollbar</strong> stellen Sie das Aussehen des Wrapper ein. Und
                mit <strong>Link zu Admidio</strong> können Sie noch einen Link aktivieren.
				</div>
           </li>
        </ol>
        <p>Nun sollten die Anpassungen noch gespeichert werden und unter <strong>Vorschau</strong> kann man sich das Ergebnis direkt anzeigen lassen.</p>
        <p>Nat&#252;rlich kommt nun das Feintuning:</p>

        <ul>
            <li class="level1">
                <div class="li">
                    Farbanpassung von Admidio an das Wordpress Template eurer Wahl
                </div>
            </li>
            <li class="level1">
                <div class="li">
                    Kleine optische Anpassungen in Wordpress
                </div>
            </li>
        </ul>
    </div>
</div>
<div><img class="img_border" style="margin-top: -15px;" src="http://www.admidio.org/images/border_bottom.png" alt="border bottom" /></div>
</div>

Das ist die Stylesheetdatei, es sollte aber auch ohne gehen.

Code: Alles auswählen

<style id="iris-css">
*{ line-height: 1.5;}
body {
	color: #606465;
	padding-bottom: 15px;
	padding-top: 15px;
	margin: auto;
	font-size: 11pt;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-align: center;
	background-color: #96c4cb;
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-image: url('http://www.admidio.org/images/background.png');
}

.smallFontSize {
    font-size:          9pt;
}

#page_header {
	text-align: left;
	margin: 0 auto;
	width: 955px;
}

a:link, a:visited {
	color: #222222;
	text-decoration: underline;
}

a:hover, a:active {
	text-decoration: underline;
	color: #FF9C00;
}

h1 {
	padding-top: 5px;
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 18pt;
	color: #449ba6;
}

h2 {
	padding-top: 20px;
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 14pt;
	color: #449ba6;
}

h4 {
	padding-bottom: 3px;
	font-size: 11pt;
	padding-top: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #459ba6;
}

p {
	padding-bottom: 10px;
	padding-top: 10px;
	margin: 0px;
}

img {
	border: 0px;
}

tr {
    text-align: center;
}

table {
    width: 100%;
    font-size: 11pt;
}


#buttons {
	top: 72px;
	position: absolute;
	margin-left: 350px;
	padding: 0px;
	list-style-type: none;
}

/* spezieller Hack, damit die Buttons im IE7 auch richtig positioniert sind */
*:first-child+html #buttons[id] {
	margin-left: -615px;
	top: 97px;
}

#buttons li {
	display: inline;
}

#buttons li span {
	display: block;
	width: 100px;
	height: 88px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	float: left;
}

#btn_home span {
	background-image: url('http://www.admidio.org/images/btn_home_hover.png');
}
#btn_download span {
	background-image: url('http://www.admidio.org/images/btn_download_hover.png');
}
#btn_documentation span {
	background-image: url('http://www.admidio.org/images/btn_doku_hover.png');
}
#btn_developer span {
	background-image: url('http://www.admidio.org/images/btn_entwickler_hover.png');
}
#btn_demo span {
	background-image: url('http://www.admidio.org/images/btn_demo_hover.png');
}
#btn_forum span {
	background-image: url('http://www.admidio.org/images/btn_forum_hover.png');
}

#buttons li span:hover {
	background-position: 0px -88px;
}

#buttons li span a img {
	width: 100px;
	height: 88px;
	border-width: 0px;
}

#page {
	text-align: left;
	margin: 0px auto;
	width: 925px;
	padding-top: 15px;
	padding-bottom: 15px;
	display: block;
}

#left_block {
	float: left;
	margin-right: 20px;
}

#right_block > div {
	margin-left: 625px;
}

/* spezieller Hack, damit der Block im IE6 auch richtig neben den anderem positioniert sind */
html.* #right_block {
    width: 268px;
}

/* damit unter den Rahmenbildern keine 2px Abstand sind */
.img_border {
	display: block;
}

#content, #content_left {
	padding-left: 29px;
	padding-right: 29px;
    min-height: 550px;
}

#content_left {
	width: 541px;
	display: block;
}

/* spezieller Hack, damit der Block im IE6 auch richtig neben den anderem positioniert sind */
html.* #content_left {
	width: 601px;
}

.content {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	background-color: white;
	background-position: 0 bottom;
	background-repeat: repeat-x;
	background-image: url(images/background_in_borders.png);
}

#sidebar {
	padding-left: 15px;
	padding-right: 15px;
	min-height: 550px;
}

#sidebar hr {
	margin-top: 10px;
	color: #d7d7d7;
	border-width: 1px;
	border-style: dashed;
}

/***************************************/
/* Spezieller Teil fuer die Startseite */
/***************************************/

#home_left_block {
	float: left;
	margin-right: 20px;
	width: 253px;
}

#home_block {
	text-align: left;
	margin: 0px;
	width: 540px;
	padding-top: 15px;
	padding-bottom: 15px;
	display: block;
}

#home_right_block div {
	margin-left: 285px;
	width: 221px;
}

/* spezieller Hack, damit der Block im IE6 auch richtig neben den anderem positioniert sind */
html.* #home_right_block div {
	margin-left: 280px;
	width: 253px;
}

#home_content_1 {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	padding-left: 15px;
	padding-right: 15px;
}

#home_content_2 {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	padding-left: 15px;
	padding-right: 15px;
}


#home_features {
	width: 535px;
}

#home_features_content {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	padding-left: 15px;
	padding-right: 15px;
}

#download {
	background-image: url('http://www.admidio.org/images/download_background.png');
	background-repeat: no-repeat;
	margin-top: 15px;
	width: 334px;
	height: 100px;
	color: #266507;
	padding: 10px 15px 10px 15px;
}

#download a {
	padding-bottom: 5px;
	color: #25650c;
	font-size: 18pt;
}

.changelog {
	margin: 0px;
	padding-left: 30px;
}
body {
	color: #606465;
	padding-bottom: 15px;
	padding-top: 15px;
	margin: auto;
	font-size: 11pt;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-align: center;
	background-color: #96c4cb;
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-image: url('http://www.admidio.org/images/background.png');
}

.smallFontSize {
    font-size: 9pt;
}

#page_header {
	text-align: left;
	margin: 0 auto;
	width: 955px;
}

a:link, a:visited {
	color: #222222;
	text-decoration: underline;
}

a:hover, a:active {
	text-decoration: underline;
	color: #FF9C00;
}

h1 {
	padding-top: 5px;
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 18pt;
	color: #449ba6;
}

h2 {
	padding-top: 20px;
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 14pt;
	color: #449ba6;
}

h4 {
	padding-bottom: 3px;
	font-size: 11pt;
	padding-top: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #459ba6;
}

p {
	padding-bottom: 10px;
	padding-top: 10px;
	margin: 0px;
}

img {
	border: 0px;
}

tr {
    text-align: center;
}

table {
    width: 100%;
    font-size: 11pt;
}


#buttons {
	top: 72px;
	position: absolute;
	margin-left: 350px;
	padding: 0px;
	list-style-type: none;
}

/* spezieller Hack, damit die Buttons im IE7 auch richtig positioniert sind */
*:first-child+html #buttons[id] {
	margin-left: -615px;
	top: 97px;
}

#buttons li {
	display: inline;
}

#buttons li span {
	display: block;
	width: 100px;
	height: 88px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	float: left;
}

#btn_home span {
	background-image: url('http://www.admidio.org/images/btn_home_hover.png');
}
#btn_download span {
	background-image: url('http://www.admidio.org/images/btn_download_hover.png');
}
#btn_documentation span {
	background-image: url('http://www.admidio.org/images/btn_doku_hover.png');
}
#btn_developer span {
	background-image: url('http://www.admidio.org/images/btn_entwickler_hover.png');
}
#btn_demo span {
	background-image: url('http://www.admidio.org/images/btn_demo_hover.png');
}
#btn_forum span {
	background-image: url('http://www.admidio.org/images/btn_forum_hover.png');
}

#buttons li span:hover {
	background-position: 0px -88px;
}

#buttons li span a img {
	width: 100px;
	height: 88px;
	border-width: 0px;
}

#page {
	text-align: left;
	margin: 0px auto;
	width: 925px;
	padding-top: 15px;
	padding-bottom: 15px;
	display: block;
}

#left_block {
	float: left;
	margin-right: 20px;
}

#right_block > div {
	margin-left: 625px;
}

/* spezieller Hack, damit der Block im IE6 auch richtig neben den anderem positioniert sind */
html.* #right_block {
    width: 268px;
}

/* damit unter den Rahmenbildern keine 2px Abstand sind */
.img_border {
	display: block;
}

#content, #content_left {
	padding-left: 29px;
	padding-right: 29px;
    min-height: 550px;
}

#content_left {
	width: 541px;
	display: block;
}

/* spezieller Hack, damit der Block im IE6 auch richtig neben den anderem positioniert sind */
html.* #content_left {
	width: 601px;
}

.content {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	background-color: white;
	background-position: 0 bottom;
	background-repeat: repeat-x;
	background-image: url('http://www.admidio.org/images/background_in_borders.png');
}

#sidebar {
	padding-left: 15px;
	padding-right: 15px;
	min-height: 550px;
}

#sidebar hr {
	margin-top: 10px;
	color: #d7d7d7;
	border-width: 1px;
	border-style: dashed;
}

/***************************************/
/* Spezieller Teil fuer die Startseite */
/***************************************/

#home_left_block {
	float: left;
	margin-right: 20px;
	width: 253px;
}

#home_block {
	text-align: left;
	margin: 0px;
	width: 540px;
	padding-top: 15px;
	padding-bottom: 15px;
	display: block;
}

#home_right_block div {
	margin-left: 285px;
	width: 221px;
}

/* spezieller Hack, damit der Block im IE6 auch richtig neben den anderem positioniert sind */
html.* #home_right_block div {
	margin-left: 280px;
	width: 253px;
}

#home_content_1 {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	padding-left: 15px;
	padding-right: 15px;
}

#home_content_2 {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	padding-left: 15px;
	padding-right: 15px;
}


#home_features {
	width: 535px;
}

#home_features_content {
	border-right: 1px solid #7d7d7d;
	border-left: 1px solid #7d7d7d;
	padding-left: 15px;
	padding-right: 15px;
}

#download {
	background-image: url('http://www.admidio.org/images/download_background.png');
	background-repeat: no-repeat;
	margin-top: 15px;
	width: 334px;
	height: 100px;
	color: #266507;
	padding: 10px 15px 10px 15px;
}

#download a {
	padding-bottom: 5px;
	color: #25650c;
	font-size: 18pt;
}

.changelog {
	margin: 0px;
	padding-left: 30px;

}</style>

Mit freundlichen Grüßen Lutz

[SebFontain]

Hey gabischatz,

habe den Wrapper auf WP installiert.

Mit dem Modern Theme klappt es auch,

wenn ich dein WP Theme installiere und in Admidio das Theme dann darauf umschalte, kann ich nach dem einloggen in Admidio nichts mehr sehen bis auf die Login Form.

Musste über die Datenbank das Theme wieder auf Modern umschalten damit ich mit admidio wieder Arbeiten kann.

In WP wurde die announcements.php mit deinem Theme besser dargestellt.

Oder mache ich dann alles nur noch aus WP raus?

Gruß Seb

[gabischatz]

Hi Sebastian,

wenn ich dein WP Theme installiere und in Admidio das Theme dann darauf umschalte, kann ich nach dem einloggen in Admidio nichts mehr sehen bis auf die Login Form.

Das hängt sicherlich mit deinem WordPress-Theme zusammen. Wenn du ein in WordPress ein ziemlich dunklen Hintergrund hast ist es logisch das du da nichts siehst. Ich habe nur in im Admidio-Theme die Hintergrundfarbe auf Transparent gestellt, sodass Admidio sich in Wordpress wie in einen Guss darstellt.
Wenn dein WordPress-Theme dunkel ist müsstest du im Admidio-Theme schauen wo ich

Code: Alles auswählen

background-color: transparent;

eingetragen habe und dort die Schriftfarbe auf weis einstellen.

Code: Alles auswählen

 color:#fff;

In WP wurde die announcements.php mit deinem Theme besser dargestellt.

Oder mache ich dann alles nur noch aus WP raus?

In WP erstellst du weiter deine Blognachrichten oder Seiten (Impressum, Kontakt usw.) und im Admidio deine Vereinsmitteilungen.
Mit freundlichen Grüßen aus Bad Langensalza Lutz

[henner]

Hallo,
ich würde admidio gerne auf http://blog.rvweser.de einbinden. Leider kann ioch aber deine verlinkte zip-Datei nicht entpacken.
Hast du einen Tipp?
Beim entpacken erscheint ein unbekannter Fehler und dann habe ich nur die leeren Verzeichnisse.

Herzlichen Dank

Henner

[gabischatz]

Hallo,
ich würde admidio gerne auf http://blog.rvweser.de einbinden. Leider kann ioch aber deine verlinkte zip-Datei nicht entpacken.
Hast du einen Tipp?
Beim entpacken erscheint ein unbekannter Fehler und dann habe ich nur die leeren Verzeichnisse.

Hi Henner, eigentlich brauchst du die zip-Datei nicht selber zu entpacken, siehe http://gabischatz.bplaced.net/admidio-i ... stallation.

Wenn das nicht klappen sollte, dann findest du auf der Seite http://gabischatz.bplaced.net/code/plug ... r_code.htm den
Quellcode. Erstelle einen Ordner und eine Datei mit dem Namen admidio-in-wordpress-einbinden.

An die Datei hängst du noch .php an und folgst der Beschreibung http://gabischatz.bplaced.net/admidio-i ... stallation.

Ich versuche die Dateien noch mal mit einem anderen Programm zu packen und melde mich danach noch ein mal.
Frage: welches Pack-Programm verwendest du?
Grüße

[henner]

Hallo,
beim Versuch, den wrapper direkt im wordpress zu installieren kommt die Fehlermeldung im Anhang:
"Die Datei konnte nicht aus dem Archiv extrahiert werden. admidio-wrapper/liesmich.html"

Hast du da eine IDee?
Als Packprogramm nutze ich Win10 Standard.

[henner]

Hallo!
die manuelle Installation hat jetzt geklappt.

[axarix]

Bei mir läuft WP mit dem Theme: TwentyEleven. Habe den admidio-Wrapper manuell installiert. Hat soweit alles geklapt. Vielen Dank schon mal für Deine Arbeit.


Leider verbleibt links auf der eigentlichen Seite ein breiter Freiraum. Wie schaffe ich es, dass dieser Freiraum verschwindet und der Inhalt nach links verschoben wird. Man könnte dann das komplette Admidio in den Wrapper verschieben.

Der Link zu meiner Seite lautet: http://computerfreunde-niederrhein.de/mitglieder-2

Gruß Rainer

[fasse]

Hallo Lutz,

ich habe jetzt deine Seite mit dem Plugin mal hier aufgenommen. Wenn mal zeit da ist, wäre es natürlich schon, so eine Dokumentation in unserem Wiki zu haben.

Viele Grüße
Fasse