Programmieren

Hallo erstmal.

Ja ich weiß Programmieren interessiert hier wahrscheinlich die wenigsten, aber ich für meinen Teil will gerne mein Wissen weiter geben. Also wird es hier wohl zukünftig mehr Artikel in den Bereich der Programmierung geben.

Heute kommen wir mal zu einer Geschicht aus meiner Vergangenheit.

PHP und Javascript hab ich mir ja immer nur selber beigebracht. Aus diversen Quellen aus dem Internet. Nur mit dem Internet ist das ja so eine Sache, entweder man erkennt direkt das Beste und einfachste oder vielleicht auch nicht.

Naja ich suchte also einen Code der bestimmte Seiteninhalte neu läd ohne die ganze Seite immer wieder komplett neu zu laden. Das hatte ich irgendwo schon einmal gesehen. Und aus meinem damaligen Wissen, wusste ich das wenn dann nur Javascript-Code Seiten im nachhinein ändern kann (damals hatte ich selber noch keine Ahnung von JS).

Also begab ich mich auf die Suche nach einem Codebeispiel. Aber jetzt kommen wir mal zu dem eigentlichen Titel dieses Beitrags. Das Rad nicht immer neu erfinden.

WeiterlesenDas Rad nicht immer neu erfinden: Ajax Abfrage

So dank: DrWeb und Chaosbox bin ich nun endlich dazu gekommen Twitter und Facebook Status abzufragen 😉

Und da ich mit der Entdeckung noch mehr vor habe, schreib ich die mal schnell hier rein 😉

echo '<h1>Sascha Social</h1>';
echo '<h2>Twitter</h2>';
$twitter_user="Istani";
$twitter=file_get_contents("http://search.twitter.com/search.json?q=from%3A".$twitter_user);
$twitter = json_decode($twitter, true);
foreach ($twitter['results'] as $eintrag_tw) {
    echo utf8_decode($eintrag_tw['text']).'<br>';
}
echo '<h2>Facebook</h2>';
$facebook_user="100000196751213";
$facebook=file_get_contents("http://graph.facebook.com/".$facebook_user."/feed");
$facebook = json_decode($facebook, true);
foreach ($facebook['data'] as $eintrag_fb) {
    echo utf8_decode($eintrag_fb['message']).'<br>';
}

Natürlich müsste man die Ausgabe noch verschöner, aber ich geb euch ja keine fertigen Sachen, ein wenig was müsst ihr schon selber machen 😛

Hier kann man es sich mal ansehen: script/social_status.php

So nachdem wir jetzt im letzten Teil der Reihe den Header und die “Navigation” gemacht haben, schauen wir uns jetzt mal die Sidebar an…

Für den erste Schritt nehm ich heute mal ganz doll an die Hand, um eine Sidebar zu erstellen wie wir sie momentan auf Randompeople haben benötigen wir nur folgende Zeilen PHP Code:

<li><h2>Kategorien</h2>
	<ul>
		<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
	</ul>
</li>
<br \><br \>
<li>
	<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
<br>
<?php $args = array(
    'orderby'          => 'name',
    'order'            => 'ASC',
    'limit'            => -1,
    'category'         => "",
    'exclude_category' => "",
    'category_name'    => "",
    'hide_invisible'   => 1,
    'show_updated'     => 0,
    'echo'             => 1,
    'categorize'       => 1,
    'title_li'         => __('Bookmarks'),
    'title_before'     => '<h2>',
    'title_after'      => '</h2>',
    'category_orderby' => 'name',
    'category_order'   => 'ASC',
    'class'            => 'linkcat',
    'category_before'  => '<li id=%id class=%class>',
    'category_after'   => '</li>' );
wp_list_bookmarks( $args );
?>

Wenn ihr die einbindet seht ihr das dort noch eine PHP Fehlermeldung erscheint, keine Sorge wir haben nur auf searchform.php verwiesen was ich für meinen Teil noch gar nicht erstellt hatte… So sieht diese aus:

<h2>Suche</h2>
<div>
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Suche..." />
</form>
</div>

Und so sieht das ganze dann bisher aus:

Wie ihr seht ist die Sidebar noch ziemlich Kacke formatiert, das werde ich nach Möglichkeit alles über CSS machen… Das ist aber ne Menge Arbeit und ihr wollt bestimmt euren eigenen Style, deswegen nehme ich euch da jetzt nicht an die Hand… Ich zeig euch aber sobald ich soweit bin wie es dann bei mir aussieht 😉 Aber jetzt bin ich erst mal auf dem letzten Weihnachtsessen für dieses Jahr… Also bis denne dann 😉

Nochmal zur Info, dies soll keine genaue Programmier Anleitung für WordPress Themes sein sondern nur die Besonderheiten auflisten die mir bei der Programmierung des Themes aufgefallen sind. Ansonsten gibt es schon genug Anleitungen wenn man Google bemüht. (siehe auch Quellen im ersten Beitrag der Serie).

So nach dem wir uns die Tutorials durchgesehen haben und schon ein wenig rumgespielt haben schauen wir uns mal an was wir bisher geleistet haben…

Wie man vielleicht merkt habe ich bisher nur nach dem Vorgaben von http://bueltge.de/ gearbeitet, aber das wird sich nun wohl ändern, weil das Tutorial dort leider nicht fertiggestellt wurde und wenn ich mich nicht verlesen habe Fehler enthält. Aber wenn ihr es soweit schon geschafft habt dann bin ich ja froh. Aber ich wollte euch ja Besonderheiten vorstellen. Also kommt als erstes mal der Banner.

Die auf bueltge.de vorgestellten Lösungen mit

<?php include (TEMPLATEPATH . '/example.php'); ?>
<?php include (ABSPATH . 'wp-content/themes/default/example.php'); ?>

Wollten bei mir beider nicht funktionieren, ist ja auch irgendwie klar, da wird der Absolute Pfad vom Webserver angegeben, für Includes sicherlich gut, aber ansonsten nicht zu gebrauchen. Also habe ich mich diesen Trick bedient:

<center>
  <a href="<?php bloginfo('url'); ?>/">
    <img src="<?php bloginfo('url'); ?>/wp-content/themes/randompeople/img/banner.jpg">
  </a>
</center>

Bei Bildern ist das ja kein Problem diese mit dem kompletten URL einzubinden…

Als nächstes kommen wir zur Navigation, die hatte mir früher Sorgen gemacht… Aber bei einem meiner Projekte musste ich so eine Navigation schon mal machen, deswegen wusste ich wie das ablaufen muss. Da ich aber das alte Design noch teilweise übernehmen wollte hab ich einfach die Zeile kopiert und leicht abgeändert. So hab ich das ganze dann mal notiert:

<ul class="menu">
        <li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home','k2_domain'); ?></a></li>
        <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
        <?php wp_register('<li class="admintab">','</li>'); ?>
</ul>

/* Navigation */
    ul.menu {
        left: 20px;
        width: 90%;
    }
    ul.menu li {
        display: inline;
    }
    ul.menu, ul.menu li a {
        padding: 5px 15px 6px;
        text-decoration: none;
    }
    ul.menu li a {
        font: 1em Verdana, Helvetica, Arial, Sans-Serif;
        color: white;
        background: #FFA82C;
    }
    ul.menu li a:hover {
        background: #FFCD3A;
        color: #eee !important;
        text-decoration: none;
    }
    ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
        color: #333 !important;
        background: #FF4924;
        text-decoration: none;
    }
    .admintab {
        padding: 50px !important;
    }

So dann mal schauen was wir die nächsten Tage so schaffen 😉

Also erstes hab ich mir natürlich auch im Internet verschiedene Quellen angesehen um zu erkennen wie das erstellen von eigenen WordPressdesigns funktioniert. Einige gute Quellen sind zum Beispiel (werden später ergänzt):

http://bueltge.de/wp-tutorial-wir-schreiben-ein-wordpress-theme-teil-1/498/

http://webdesignblog.de/uncategorized/eigenes-wordpress-template/

http://wordpress.lernenhoch2.de/handbuch/eigenes-wordpress-template-erstellen/schritt-2/single-php-template-fur-beitrageposts/

Dann habe ich mir überlegt wie das WordPressdesign von Randompeople aussehen sollte. Da ich zum Glück beruflich mit der Entwicklung von Webanwendungen zu tun habe, habe ich mir diese und andere Webseiten angesehen und mir eine grobe Vorstellung davon gemacht wie ich das gerne bei Randompeople hätte. Da die meisten meiner Projekte nur Firmen intern laufen und auch teilweise im Design des jeweiligen Kunden angepasst sind. Darf ich hier leider keine Screenshots anzeigen. Daher versuche ich mal in einigen kurzen Worten anzugeben was ich verwirklichen möchte.

Das grobe Design von Randompeople sollte erhalten werden, nur an einigen stellen sollte es etwas “freundlicher” aussehen… Zum Beispiel oben die Navigation find ich gut, bleibt ähnlich… Die Site Bar links will ich auch unbedingt haben, also bleibt diese auch, wird nur an der ein oder anderen Stelle etwas anders aussehen und ergänzt. Dann zum Content. Die Leiste mit den Seiten find ich eigentlich doch nicht so schön ehrlich gesagt… Ich werd wahrscheinlich wieder auf Perv-Next umsetzt aber diesmal mit Deutschen Text… Dann find ich auf der Startseite die Artikel irgendwie alle nur so dahin geklatscht, es sollte meiner Meinung nach schon besser erkennbar sein wo ein Artikel aufhört und ein neuer Anfängt… Und außerdem nervt mich das total wenn z.b. YouTube Videos drin sind die dann über den Seiten Rand ragen. Naja versuchen wir mal das zu ändern… Dann die einzelne Artikel anzeige… Ich persönlich finde da sollte noch ein kurzer Text über den Autor stehen, das hab ich auch schon an einigen Stellen gesehen, schauen wir mal was wir hier hinbekommen, dann möchte ich die Artikelserien Anzeige und Ähnliche Artikel anzeige noch ein wenig freundlicher gestallten, die ganzen Texte auf Deutsch und schauen wir mal was uns bis dahin noch alles so einfällt… Dann natürlich Forum und Kalender noch ein wenig verbesser 😉

Wie in den Quellen bereits erwähnt sollte man gute Kenntnisse in HTML, CSS, PHP und möglicherweise auch JavaScript und MySQL haben… Desweiteren benötigen wir bevor wir Anfangen eine laufende WordPress Installation, ich habe dafür lokal Xampp installiert und das Backup von Randompeople geladen 😉

Da ich nicht weiß wie die anderen jetzt vielleicht doch ihre Artikel schreiben und auch nicht weiß wie ich noch Zeit dafür finde hab ich euch heute mal einen Beitrag zum einen JavaScript-Code mit dem ich mich aufgehalten habe. Eigentlich wollte ich hier in den Blog ja kein Programmieren einbringen, aber nun ja eigentlich wollten wir das alle hier ja auch Organisierter machen, und ich für meinen Teil finde das da auch hingehört das man Artikel schon einige Tage vorher fertig hat.  Um ganz genau zu sein hätte ich eigentlich gerne für die nächsten 7 Tage schon komplett fertige Artikel, und für 7 weitere Tage Artikel die noch Korrektur gelesen werden müssen und dann kann natürlich noch jeder so viele Entwürfe gespeichert haben wie er mag… Aber naja jetzt mal zu diesen Artikel…

WeiterlesenJavaScript: Alle externen Links ändern