Nach einigen Wochen der Entwicklung ist es endlich da, das neue WordPress Theme namens „Two Sided“. Das Theme ist eine Mischung aus Magazin und klassischem Blog Look. Ein wenig Pink dazu, bestens geeignet für guten Content. Die Startseite ist zweispaltig und ohne Sidebar. Die WordPress Menü Funktionalität ist integriert. Jede Menge Widgets warten darauf von dir befüllt zu werden. Threaded comments? Logisch. Natürlich ist das Theme kostenlos.
„Two Sided“ Theme Startseite
Auf der Vorschauseite des Themes kannst du dir „Two Sided“ in Aktion anschauen.
Installation des „Two Sided“ Themes
- Zip Datei „twosided_de.zip“ herunterladen
- Zip entpacken und den Ordner „twosided_de“ in dein WordPress Theme Verzeichnis hochladen (wp-content/themes/)
- Um das Theme zu aktivieren, gehe in der WordPress Administration unter „Design“ auf den Punkt „Themes“ und wähle dort das „Two Sided“ Theme aus
Zuordnung der Kategorien auf der Startseite
Die Startseite hat eine linke und rechte Spalte. Um die Zuordnung deinen Kategorie-IDs anzupassen öffne bitte die Datei „index.php“ im Theme Ordner. Dort siehst du zwei WordPress Loops. Der erste Loop definiert die linke Spalte, der zweite Loop die rechte.
Die richtigen Kategorie IDs herausfinden
Gehe in das WordPress backend unter „Artikel“ -> „Kategorien“. Wenn du jetzt mit der Maus über eine bestehende Kategorie fährst, dann siehst du in Status Bar des Browsers (unten) eine lange URL. Dort steht unter anderem „tag_ID=…“ Die Zahl die hier steht ist die ID einer Kategorie.
Linke Spalte
In Zeile 10 der „index.php“ fügst du die IDs der Kategorien hinzu, die du in der linken Spalte möchtest:. Nehmen wir an du möchtest die Kategorie „Letzte News“ ausgeben und diese hat die ID 5, dann würde das so aussehen:
<?php $feature_post = get_posts( 'category=5&numberposts=6' ); ?> |
Möchtest du mehrere Kategorien ausgeben, dann trenne die unterschiedlichen Kategorie-IDs durch ein Komma. Beispiel, wenn du Kategorien mit den IDs 5, 7 und 285 ausgeben möchtest:
<?php $feature_post = get_posts( 'category=5,7,285&numberposts=6' ); ?> |
Rechte Spalte
Geh hierfür in die Zeile 42 der „index.php“. Dies ist der gleiche Loop noch einmal. Trage hier die gewünschten Kategorien ein, die in der rechten Spalte erscheinen sollen.
Das „Main Menu“
Im Backend unter „Design“ -> „Menüs“ kannst du dir dein eigenes Menü zusammenstellen. Um das Hauptmenü ganz oben im Theme anzulegen musst du ein Menü mit dem Namen „Main Menu“ anlegen. Solltest du nicht wissen wie Menüs in WordPress angelegt werden empfehle ich dir dieses kleine Tutorial zu WordPress Menüs. Es ist aus meiner Sicht wirklich intuitiv.
Die Widgets
Widgets sind Bereiche der Seite, die du über das Backend von WordPress bequem befüllen kannst, ohne die Dateien des Themes ändern zu müssen. „Two Sided“ verwendet folgende Widgets:
- 1 Widget im Header (im Backend „statement“)
- 4 Widgets auf der Startseite (im Backend „home1“ bis „home4“)
- 4 Widgets im Footer (im Backend „footer1“ bis „footer4“)
- 4 Widgets in der Sidebar (im Backend „side1“ bis „side4“)
Du findest die Widgets im WordPress Backend unter „Design“->“Widgets“. Dort siehst du in der rechten Seite alle verfügbaren Widgets und kannst dir die entsprechenden Inhalte in das Widget ziehen.
Artikelbilder auf der Startseite
Wenn du im WordPress Backend einen Artikel erstellst, siehst du in der rechten Spalte eine Box namens „Artikelbild“. Dort kannst du ein Artikelbild hochladen. Das Format des Bildes ist 454/100 Pixel. Das musst du aber nicht zwingend beachten. Die Funktion wurde so integriert, dass ein Bild das du hochlädst automatisch auf diese Größe im Hard Crop Modus angelegt wird.
Tipp: Verwendung von Fotos auf einer Artikelseite
Die maximale darstellbare Breite für ein Bild auf einer Artikelseite ist 520 Pixel. Natürlich wird auf Klick das Bild größer angezeigt. Ich habe mir die maximale Breite und Höhe unter „Einstellungen“ -> „Mediathek“ als „Mittlere Bildgröße“ angelegt. Wenn man dann während dem Artikel sreiben ein Bild einfügt kann man einfach „Mittlere Bildgröße“ auswählen und die Breite/Höhe stimmt automatisch.
Lizenz des Themes
Das „Tow Sided“ Theme ist mit der Creative Commons CC BY-NC 3.0 Lizenz versehen. Das heisst du kannst damit machen was du möchtest, solange der Link zu „http://www.fakeblog.de“ im Footer erhalten bleibt.
Spenden ist großartig
Wenn du das „Two Sided“ Theme nutzen kannst macht mich das sehr glücklich. Solltest du das Gefühl haben mir etwas Gutes tun zu wollen, würde ich mich über eine Spende sehr freuen. Davon könnte ich mir kleine Wünsche erfüllen. Vielen Dank dafür.
Download des „Two Sided“ Themes
„Two Sided“ Theme – the english version
As far as I know some people might be interested in an english version of the theme. Therefore I created the whole theme in your language. Maybe you have to tweak some text parts, but I guess it should be ok;)
„Two Sided“ Theme frontpage
You can see „Two Sided“ in action on the preview page of the theme.
Installation of the „Two Sided“ theme
- Download the *.zip file „twosided_en.zip“
- Extract the *.zip file and upload the folder „twosided_en“ to your WordPress theme directory (wp-content/themes/)
- To activate the theme open the WordPress backend and go to „Appearance -> Themes“. Choose the „Two sided“ theme and you´re ready to go.
The categories in the left and right column of the frontpage
As you might have seen, the frontpage is a two column layout. To insert the right category IDs please open the file „index.php“ in the theme folder. So there are two WordPress loops to define each column.
How to find your Category IDs
Go to the backend and go to „Posts“ -> „Categories“. If you move your mouse over existing categories look to the status bar (bottom) of your browser. You will see a long URL. Watch out for „tag_id=…“ The number you will see there is your category ID.
Left Column
Go to line 10 in the file „index.php“. Add the category Ids that you want to be displayed in the left column. Example: you want your category „Latest news“ in the left column and the category has the ID 5 the line would look like this:
<?php $feature_post = get_posts( 'category=5&numberposts=6' ); ?> |
If you want to display different categories in the left column, no problem. Just separate the different category IDs with a comma. Example: if you want the category IDs 5, 7 and 285 to be displayed the line of code looks like this:
<?php $feature_post = get_posts( 'category=5,7,285&numberposts=6' ); ?> |
Right Column
Go to line 42 in the file „index.php“. You will see the same loop again, but now for the left column. Enter your category IDs as described above.
The top menu named „Main Menu“
You can create your own Menu. In the WordPress backend go to „Appearance“ -> „Menus“. To create the top menu in the „Two sided“ theme name your new menu „Main Menu“. If you don´t know how to create a custom menu this video tutorial will help you out. It is really easy.
The Widgets
On the surface, widgets are just things you can use to personalize your WordPress site without knowing HTML. You can change the content via the backend of WordPress. „Two Sided“ uses the following widgets:
- 1 Widget in header (called „statement“ in the backend)
- 4 Widgets on frontpage (called „home1“ to „home4“ in the backend)
- 4 Widgets in footer (called „footer1“ to „footer4“ in the backend)
- 4 Widgets in sidebar (called „side1“ to „side4“ in the backend)
To change the content of the widgets go to „Appearance“->“Widgets“ in the WordPress backend. You will see all widgets on the right side. Just drag and drop the desired content into the widget boxes.
Post Thumbnails on the frontpage
If you write a post you will see a Box called „Feature image“ on the right side. This is the place to upload your post thumbnail. The size of the post thumbnail is 454/100 pixels. If you upload an image with another size, the image will be cropped via „Hard Crop mode“. It´s your decision. Both ways are possible. If you don´t upload a post thumbnail a default image will be used. To change this default image just overwrite this file: „wp-content/themes“images/default_post_thumbnail.gif“
Tip for images on a single post page
The maximum width of an image on a single post page is 520 pixel. I defined this in the WordPress backend. Go to „Settings“ -> „Media“ and change the size of the „Medium Size“ to a maximum width of 520 pixels. If you write a post now and insert a image you just have to choose „Medium Size“ and the width will be fine.
License of the „Two Sided“ theme
The „Two Sided“ WordPress theme is released under the Creative Commons CC BY-NC 3.0 license, meaning you can do pretty much whatever you want with it, until the link to „http://www.fakeblog.de“ remains in the footer of the theme.
Think about a small donation
Of course I am glad if you can use the „Two Sided“ theme. If you want me to help the work going on I would be very happy about a donation. Just to fullfill some small dreams I have. Or just to say thank you:-)
Download „Two Sided“ WordPress theme
Ui, schick! Wir werden trotzdem bei unserer aufgepimpten Version von eurem Overstand-Theme bleiben :-D
Hola!
Verdaderamente, es un lujo encontrar trabajos tan cuidados y sobre todo gratuitos!
Muchísimas gracias (DANKE SCHÖN!)
Ist es beabsichtigt, dass die obere Leiste („Admin Bar“) fehlt, wenn man eingeloggt ist?
Das gesamte Template wird zwar entsprechend nach unten geschoben, aber die Leiste selbst fehlt.
Gruß!
Hi Ben,
danke für den Hinweis. Ich habe die Download Dateien abgeändert. Wenn du die Admin Bar benötigst, dann kannst du in der Datei „footer.php“ vor dem schliessenden body-Tag ein < ?php wp_footer(); ?> einfügen. Dann wird die Admin Bar angezeigt.
Sehr cool, jetzt passts – vielen Dank :)
Hallo nochmal :)
Es fiel mir grad auf, dass evtl. eine JS-Datei im Template-Paket fehlt.
Die „header.php“ versucht in Zeile 41 die JS-Datei „/js/jquery.scrollTo-min.js“ aufzurufen. Die existiert allerdings nicht und resultiert in einem 404-Fehler.
Ich vermute die Zeile ist noch historisch bedingt, da die Datei auf deiner Seite aus dem Theme-Ordner „overstand_simplified“ kommt.
Es wäre auch sehr schön, wenn in der „single.php“ die „socialrow“ nicht automatisch die Werte von den jeweiligen Diensten ziehen würde und eventuell sogar über die Konfiguration ausschaltbar wäre.
Es würden nur einfache Buttons reichen, die dann per Link weiterleiten und die Grafiken auch direkt aus dem Theme laden.
Siehe auch: http://netzpolitik.org/2011/facebook-like-button-datenschutzfreundlich-lokal-einbauen
P.S. Noch ein 404 auf der Beitragsseite: wp-content/themes/twosided_en/images/bk_input.jpg
:)
Hey Ben, wow, danke für deine Tipps. Am Ende übersieht man immer noch etwas. Mist. Ich werde die Fehler noch beseitigen. Mit den Social Buttons muss ich mich erstmal noch genauer beschäftigen, da ich diese nicht über ein Plugin einbinden möchte. Diese im backend auszuschalten wäre super. Leider muss ich mich da erst noch einlesen, wie ich das überhaupt machen kann;) Aber das wird schon.
Besten Dank für deine Mithilfe.
Gerne :) Ein Plugin für die Socialbar brauchst du aber gar nicht benutzen.
Schau mal in den Artikel oben – dort ist z.B. einfach der Facebook-Button so im Template:
<a href="http://www.facebook.com/sharer.php
?u=&
t=“ target=“_blank“>
Wenn man dann auf den Button klickt landest du genauso bei FB nur ohne den Counter und eine permanente Übertragung von IP, Referer und co an FB.
Bräuchtest also nur das Logo ins Template packen und deinen Code in der Socialrow anpassen.
Das stimmt. Aber was nutzt es, wenn der Google+ Button normal eingebunden ist? Wenn dann sollte man alles machen oder nichts, oder? Das ist sonst auch so eine halbherzige Sache. ja, ich kümmere mich schon um Datenschutz, irgendwie, aber bei Google+ eben nicht. Und bei Flattr auch nicht. Das heisst ja nicht, dass nu Facebook was mit meinen Daten anfangen kann (das heisst eigentlich nicht mehr, weil ich da ja nicht mehr vertreten bin;))
What a wonderful theme, thank you! Is there a wat I can remove the blogtitle? I would like to display just the header because that has already got my practicename in it. Hope you can help me out.
Hi Brenda,
open the file „header.php“ in the theme folder. Line 61-63 is the part with the blog title:
Try to delete this part, save the file and upload it. Hopefully this works.
Thank you so much for your reply. I have not made the changes yet, but when I have, i will let you know. Keep up the good work!
Hello Floyd,
again a big thank you for a great webtemplate!
At the moment I am trying to get a one category page like your homepage. The one category I get, but when I do this all the other things that are usually in my right sideline, like, twitter and stuff, keeps magically disappearing…
Have you got any idea on how to solve this problem?