Archive for the 'WordPress' Category


After the session 0

Posted Luty 24, 2009

Wszystko zadne, nawet największy kozak w pierwszym terminie. W międzyczasie poszukuje pracy o dziwo nawet czynnie, bo już mój fejm na goldenline się chyba wyczerpał.

W między czasie by mój talent programistyczny nie zardzewiał do reszty zająłem się ambitnym przedsięwzięciem, polegającym na stworzeniu Thema do wordpressa dla mojego znajomego co zajmuje się renowacją starych motorów. O dziwo stworzyłem również własnoręcznie na tablecie Wacom Bamboo wyczesany layout i właśnie jestem w trakcie jego cięcia. Ja rozumiem, że pojęcie wyczesany jest mocno przegięte. Również typografia pozostawia wiele do życzenia, ale to już są pierdoły, którymi można zająć się podczas pisania CSS’ów.

Layout Classic Motor

Layout Classic Motor

Jak to zwykle bywa po dobrze wykonanym obowiązku czas odpocząć więc dnia 7.03 uderzam tutaj:

Wyświetl większą mapę

Tymczasem zostawiam wam coś do przemyśleń, a’propos waszych wymówek w pracy.

Będzie mnie jeszcze można zobaczyć na najbliższym Barcampie oraz marcowym spotkaniu Poznań Adobe User Group

Pozdrawiam wszystkich Allegrowiczów,

mGz

GoogleMaps + Wordpress Szybki Kurs 5

Posted Lipiec 11, 2008

  1. Wstęp

    Dawno nic o google maps nie pisałem zatem przedstawie wam kurs jak do statycznej strony np z kontaktem dodać mapę googla z kilkoma efektami. Ktoś pewnie zapyta: “po co? Przecież jest dokumentacja na googlemaps.com” Ja pokażę krok po kroku co i jak. Nie obraźcie się jeśli ten tutorial będzie wyglądał jak artykuł z “Komputer świata”.

  2. Pobieramy GoogleMaps API key

    1. Rozpoczynamy pracę od wejścia na stronę: http://code.google.com/apis/maps/
    2. Zgadzamy się z warunkami umowy licencyjnej i podajemy adres naszej strony:
    3. Gdy strona jest już zarejestrowana mamy dostęp do API key’a oraz do przykładowego skryptu.

  3. Piszemy Skrypt

    1. Tworzymy dwie rzeczy najpierw katalog js/ w katalogu wp-content/themes/nasztheme/ plik gmaps.js
    2. Kodujemy zdarzenie document.ready by załadować mapę.
      window.onload = function() {
      if (GBrowserIsCompatible()) {
      //Inicjalizacja mapy poprzez tworzenie obiektu
      var map = new GMap2(document.getElementById("map"));
      }else{
      alert("sorry but your browser sux hard. update it and come again!");
      }
      });
    3. Ustawiamy środek mapy i zoom
      map.setCenter(new GLatLng(35.083956, 103.710938), 4);
    4. Dodajemy kontrolki do mapy:
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
    5. Dodajemy punkt na mapie
      var lat = 0;
      var lng = 0;
      var point = new GLatLng(lat, lng);
      var marker = new GMarker(point);
      map.addOverlay(marker);
    6. Możemy jeszcze dodać dymek z opisem punktu lub adresem
      map.openInfoWindow(point, 'To jest nasz punkt!');
    7. Czyszczenie mapy z wszystkich markerów i InfoWindow odbywa się za pomocą polecenia:
      map.clearOverlays();

  4. Modyfikujemy Template

    Modyfikacja template polega na edycji pliku header.php plus ewentualnie można dodać kilka linii css w style.css
    Najpierw zostawmy wszystkie style i temu podobne
    Musimy w sekcji head dwie linie:

    <head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=TUTAJ_WSTAWIAMY_API_KEY" type="text/javascript"></script>
 <script src="<?php bloginfo('template_directory'); ?>/js/gmaps.js.php" type="text/javascript">
</script>
</head>

  5. Umieszczamy Mapkę w kontakcie

    Sprawa prosta. Publikujemy nową stronę. Nazywamy ją kontakt.

    I dodajemy do niej naszą mapkę:
    <div id="map"></div>
    Można przy okazji ją również ostylować.
    <div id="map" style="width: 100%; height: 400px;"></div>

  6. First Run

    Nim odpalimy po raz pierwszy naszą mapkę. To najpierw pamiętajmy o wrzuceniu na serwer wszystkich plików. Nie wiem czy zbyt wiele wymagam ale biorę za pewnik to że potraficie obsługiwać jakiegokolwiek klienta FTP.
    Zatem wrzucamy pliki:
    wp-content/themes/nasztheme/js/gmaps.js
    wp-content/themes/nasztheme/header.php

  7. Efekty

    Wszyscy doskonale zdają sobie z tego sprawę że strona musi być efektowna. Można też użyć cytatu:

    - Aplikacja?
    - Ma być droga i robić biiip

    No to sprawa prosta żeby zadbać o tzw. “Wow Effect” (nie mylić z Word Of Warcraft) możemy zastosować małą animację. Dla dużego odsetka klientów ten cytat jest

    Np. Jeżeli Firma ma trzy oddziały w mieście to możemy zrobić takie coś:

    1. Na starcie ładujemy logo firmy
    2. Pokazujemy siedzibę główną, wyświetlamy dymek
    3. Pokazujemy pozostałe siedziby w odstępach czasowych i wyświetlamy dymek z adresem i telefonem

    By zaimplementować taki skrypt nie potrzebujemy dużo dodatkowej wiedzy z dziedziny javascript’u. Po pierwsze musimy wiedzieć jak używać funkcji:

    window.setInterval(function() {
    //tutaj implementujemy swoją funkcje bądź wywołujemy już wcześniej zaimplementowaną
    }, 4000);
    //4000 to czas w milisekundach czyli w tym wypadku 4 sekundy.

    Za animację naszej mapy będzie odpowiadać:

    //dodajemy marker
    var marker = new GMarker(point);
    map.addOverlay(marker);
    //wyświetlamy dymek
    map.openInfoWindow(point, 'tekst o odzdziale');
    //przesuwamy mapę
    map.panTo(point);

    Gdzie point to element z tablicy gdzie zdefiniowaliśmy oddziały firmy.

    Po wyświetleniu trzeba wyczyścić mapę za pomocą:

    map.clearOverlays();

  8. Podsumowanie

    W sumie zastanawiam się czemu piszę taki tutorial, ponieważ jest gotowy plugin do wordpress’a który rozwiązuje problemy z googlemaps. Konfigurowalny z wp-admin z ładnego formularza.

    Może tylko po to by nauczyć się korzystać z narzędzi, które ułatwią nam pracę i nauczą pisać dobre javascripty. Zachęcam do prób z kodowaniem map by Googlemaps. I zapewniam że GoogleMaps API nie gryzie :)

mały update 0

Posted Czerwiec 12, 2008

Koniec z wysypywaniem się thema przez stare pliki tłumaczenia. Jak zwykle niezawodny jest zwolin i jego tłumaczenia są najlepsze.

Teraz już bez błędów. Pozdrawiam