Umbau eines Joomla Temlates für WordPress

  • Gelöst homeedition

    (@homeedition)


    vor 7 Jahren, 2 Monaten

    Hallo,

    ich bin gerade dabei für einen Freund eine Webpage zu erstellen (local), auf Joomla Basis.

    Aus Gründen der besseren und vielfältigeren PlugIn Angebote würde ich gerne die Website mit WordPress realisieren.

    Das Design von der Joomla-Seite würde ich gerne beibehalten und das Template soweit es geht für WordPress anpassen.

    Kann mir jemand sagen wie ich das Joomla-Template für Worpress anpassen kann/muss und als WordPress-Theme nutzen kann?

    Besten Dank 🙂

    Hier mal die index.php des Joomla Templates:

    <?php

// No direct access.

defined('_JEXEC') or die;

JHTML::_('behavior.framework', true);

$app = JFactory::getApplication();

?>

<?php echo '<!DOCTYPE html>'; ?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

  

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/footer.css" type="text/css" />
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/menu.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">  
 </head>

<body>
    <?php if ($this->countModules('header')) : ?>
  <div id="header"><jdoc:include type="modules" name="header" style="xhtml" /></div>
    <?php endif; ?>
<?php if ($this->countModules('menu')) : ?>
  <div id="menu"><jdoc:include type="modules" name="menu" style="xhtml" /></div>
         <?php endif; ?>
           <?php if ($this->countModules('slider')) : ?>
  <div id="slider"><jdoc:include type="modules" name="slider" style="xhtml" /></div>
    <?php endif; ?>
 <div id="content">
<div id="component"><jdoc:include type="component" style="xhtml"/></div>
<div class="clr"></div>
    </div>
     <?php if ($this->countModules('footer')) : ?>
  <div id="footer"><jdoc:include type="modules" name="footer" style="xhtml" /></div>
  <?php endif; ?>
    <?php if ($this->countModules('datenschutz')) : ?>
  <div id="datenschutz"><jdoc:include type="modules" name="datenschutz" style="xhtml" /></div>
  <?php endif; ?>
</body>

</html>

    Hier die template.css:

    @charset "utf-8";

/**** Schriften Importieren ****/
@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800');

/**** Content Body ****/
body {margin:0 0 0 0; width: 100%; 
  font-family: "Dosis", sans-serif;
 font-size: 14px;
line-height: 22px;
overflow-x: hidden;}

/**** Content Layout ****/
div#content {width: 100%; padding: 0 0 0 0; box-sizing: border-box; display: table;}
div#slider {width: 100%; padding: 0 0 0 0; box-sizing: border-box;}
div#logo {text-align: center; width:100%; position: fixed;}
div#logo img {width:22%; margin: 1% 0 0 0;}

/**** Facebooklink ****/
div#facebooklink {z-index: 999; margin: 110px 0 0 10px; box-sizing: border-box; display: table; position: fixed;}

/**** Header ****/
div#header {width: 100%; text-align: left; padding: 0 0 0 0; box-sizing: border-box; background: #ffffff;}
div#header_shoper {width: 100%; padding: 10px 10px 10px 10px; text-align: right; box-sizing: border-box;}

.ot-beforeafter img {width: 100%; margin:0;}
.ot-beforeafter {margin:0;}
.ot-beforeafter .credit {
display: none;
}
/**** Gallery Beschreibung ****/
div.ba-gallery-grid.css-style-5 .ba-caption {
    bottom: 0;
    height: auto;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 100%;
    z-index: 9;
}

/**** Textvorgaben ****/
.headline {text-align: left; font-size: 50px; color: #000000; font-weight: 500;}
.underheadline {text-align: left; font-size: 25px; color: #000000; font-weight: 500;}
.lauftext {text-align: left; font-size: 14px; color: #000000; font-weight: normal;}
.lauftext_head {text-align: left; font-size: 18px; color: #a21a5b;}
.headertext {
  font-size: 17px;
line-height: 17px;
  font-family: 'Crimson Text', serif;
 color: rgb(121, 12, 17, 1); font-weight: light;
}

.headertext_box {
  font-size: 17px;
line-height: 17px;
  font-family: 'Crimson Text', serif;
  color: rgb(255, 255, 255, 1);
  font-weight: light;
background: rgb(121, 12, 17, 1);
width: 100%;
padding: 15px 5px 15px 5px;
margin: 0 0 5px 0;
box-sizing: border-box;}

.fliesstext {font-size: 16px; color: #000000; line-height: 24px;}

/**** Grid Layout ****/
 .container {
    	width: 90%;
    	margin: auto;
      display:table;
            border-spacing: 20px;
      text-align: center;
    }

.container-footer {
    	width: 95%;
    	margin: auto;
      display:table;
            border-spacing: 10px;
    }

#grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Umbrechen, sobald die Box 350 Pixel Breite hat */
	}

#gridcol {
  background: #f6f6f6;
  border: 0px solid rgba(0,0,0, 0.2);
		margin: 1em;
		padding: 1.3em;
  color:#747474;
	}

#gridcol a:link, a:hover, a:active, a:visited {color:#000000;}

#gridcol2 {
		margin: 1em;
		padding: 1.3em;
  color:#747474;
	}

/**** Karte in Kontakt ****/
.responsiveContainer {
    position: relative;
  padding-bottom: 40%;
  height: 0;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**** Cookies löschen Button ****/
.cookie-decline
{text-align: center;
background: #282a2b;
padding: 1px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 0px;
  margin: 0 auto 0 auto;
}

/**** Newsletteranmeldung ****/
.jNewsLB input, textarea
{width: 55%;
padding: 5px 5px 5px 5px;
margin: 0 0 5px 0;
}

/**** Kontaktformular ****/
.rapid_contact input, textarea
{width: 100%;
padding: 5px 5px 5px 5px;
margin: 0 0 5px 0;
display: table;}

.rapid_contact_form .button
{width: 50%;
padding: 10px 10px 10px 10px;
margin: 0 0 5px 0;
  margin: 0 auto;
display: table;}

.ap_quick_contact_form {
    display: table;
  float: left;
}

/**** Datenschutz ****/
div#datenschutz
{width: 100%; padding: 0 0 0 0; box-sizing: border-box; display: table;}

/**** Sytem Message ****/
div#messages-header.message {
    background-color: #a21a5b;
    background-image: linear-gradient(to bottom, #46494f, #404348);
}

/**************************************** Media Anpassungen **********************************************/
@media all and (max-width: 850px) {
div#content {width: 100%; padding: 0 0 0 0; box-sizing: border-box; display: table;}
   .container {
    	width: 95%;
    }
  
  #grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Umbrechen, sobald die Box 320 Pixel Breite hat */
	}
  
  div#logo img {width:18%; margin: 1% 0 0 0;}
}
    • Dieses Thema wurde vor 7 Jahren, 2 Monaten von homeedition geändert.
Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 7 Jahren, 2 Monaten

    Die Templates von Joomla! und WordPress sind sehr unterschiedlich aufgebaut und die Entwicklung eines kompletten WordPress-Themes nichts, was sich in wenigen Zeilen beschreiben oder mal eben an einem Nachmittag umsetzen lässt.

    Ich würde dir eher empfehlen, im WordPress-Verzeichnis nach einem sehr ähnlichen Theme zu suchen, die Website damit aufzusetzen und dann bei Bedarf eigene Anpassungen vorzunehmen. WordPress bietet dazu im Customizer ein eigenes Eingabefeld für Zusätzliches CSS, alternativ kannst du auch ein Child Theme erstellen, damit deine Änderungen bei Updates nicht verloren gehen. Eine hübsche Anleitung findest du hier: https://themecoder.de/2018/04/12/wordpress-template-dateien-im-child-theme-ueberschreiben/

    Thread-Starter homeedition

    (@homeedition)

    vor 7 Jahren, 2 Monaten

    Besten Dank 🙂

    Ich verschiebe den Umbau in WordPress erstmal nach hinten, es läuft ja erstmal so.

    Kannst Du mir evtl. eine gute Website empfehlen wo eine sehr gute „Schritt für Schritt“ Anleitung zum Erstellen eines WordPress-Templates erklärt und gezeigt wird?

    Lieben Dank noch mal 🙂

    • Diese Antwort wurde vor 7 Jahren, 2 Monaten von homeedition geändert.
    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 7 Jahren, 2 Monaten

    Ich würde gerade zum Einstieg davon abraten, ein eigenes Theme zu erstellen. Einsteigern empfehle ich

    1. Ein Theme mit wenig Einstellungsoptionen zu verwenden, idealerweise ein Standard-Theme („Twenty …“).
    2. Dieses Theme wirklich auszureizen und auszuprobieren, was alles möglich ist – und was nicht.
    3. Das Theme mit eigenen CSS-Regeln zu ergänzen (Customizer > Zusätzliches CSS). Hier ist viel mehr möglich, als du dir wahrscheinlich vorstellen kannst.
    4. Die Nutzung von Hooks kennen lernen und ausprobieren, wie sich mit einem Hook Inhalt oder auch eine ganze PHP-Funktion in Header, Footer und ans Ende von Beiträgen anhängen lässt. Die Funktion als Code-Snippet mit dem Plugin Code Snippets einbinden.
    5. Child Theme erstellen und dabei vor allem mit dem Thema Template Hierarchie vertraut machen. Voraussetzung sind gute Grundkenntnisse in PHP, HTML (Semantik!), JavaScript, CSS (einschließlich Flexbox und CSS-Grid) und SASS.*

    Wenn du diese Schritte durchlaufen hast, kannst du über ein eigenes Theme nachdenken. Wahrscheinlich siehst du es dann aber als nicht mehr erforderlich an. Oder du hast tatsächlich ein sehr spezielles Projekt für einen sehr speziellen Kunden, der ein sehr spezielles Portemonnaie hat. Dann kannst du es so machen, wie Florian das beschrieben hat:

    Entwicklung eines WordPress-Themes mit Zielgruppe Fotografen

    *Grundwissen zu Git, Grunt und der Verwendung eines geeigneten Programmier-Editors mit Coding Standards wäre dann noch eine hübsche Ergänzung.

    Moderator La Geek

    (@la-geek)

    vor 7 Jahren, 2 Monaten

    Du könntest auch mit einem Video-Tutorial lernen, zum Beispiel von dort:

    https://www.udemy.com/courses/search/?src=ukw&q=wordpress%20theme%20development&sort=relevance&lang=de

Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)

Das Thema „Umbau eines Joomla Temlates für WordPress“ ist für neue Antworten geschlossen.