Archiwa tagu: wordpress

WP Product Catalogue

2 odpowiedzi
Twitt

Zapowiadam wydanie pluginu do WordPress’a o wdziÄ?cznej nazwie Product Catalogue. Projekt jest w fazie implementacji.  Pierwsze beta-testy odbÄ?dÄ? siÄ? jeszcze w listopadzie. Planowane Feature’y:

  • Ogl??lne:
    • Multi Lang
    • Pe??en Panel Admina
    • wsparcie Short Tags (wy??wietlanie kategorii/produktu) na dowolnej stronie lub wpisie
  • Kategorie:
    • Drzewiasta lista kategorii
    • Ka??da kategoria ze zdjÄ?ciem i opisem
    • PorzÄ?dek wy??wietlania zarzÄ?dzalny
  • Produkt:
    • Jeden Produkt Wiele zdjÄ?Ä? + ThickBox
    • Opis + opcjonalny plik do downloadu
    • ZarzÄ?dzalny porzÄ?dek wy??wietlania produkt??w

To jest specyfikcja bazowa. Jak bÄ?dzie troszkÄ? wiÄ?cej ni?? teraz (ok 500 linii kodu) postaram siÄ? wrzuciÄ? jakie?? screeny :)

Pozdrawiam.

Twitt

GoogleMaps + WordPress Szybki Kurs

5 odpowiedzi
Twitt

  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:

    Za animacjÄ? naszej mapy bÄ?dzie odpowiadaÄ?:

    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 :)

Twitt

WordPress 2.5 upload bug.

1 odpowiedź
Twitt

WordPress 2.5 Stable ma ju?? prawie miesiÄ?c. Ja po??pieszy??em siÄ? z przesiadkÄ? na nowÄ? wersje. Wiadomo nowa wersja mogÄ? siÄ? pojawiÄ? problemy z pluginami (faktycznie chyba tylko z NexGenGallery). W sumie nie uploadowa??em plik??w od czasu przesiadki wiÄ?c o problemie nie wiedzia??em.

Jednak gdy zbli??y?? siÄ? deadline projektu kt??ry w??a??nie stawia??em na wordpressie z highly customized theme(z kt??rego jestem dumny :) ) Zrobi??em update na WP 2.5. I zajÄ???em siÄ? wprowadzaniem dummy tre??ci. Wszystko by??o ok do momentu kiedy mia??em wrzuciÄ? przyk??adowe zdjÄ?cia. Upload Image najpierw wy??wietla?? mi b??Ä?dy Action Scriptu(Poniewa?? w WP2.5 do uploadu obrazk??w u??ywany jest SWFUpload). Na support forum WordPress’a znalaz??em fix. No to pomy??la??em super nie bÄ?dzie siÄ? trzeba dalej mÄ?czyÄ? wstawie fix i po sprawie.

Round 1:

Bug Fix polega?? na wy??Ä?czeniu kilku zabezpiecze??(za pomocÄ? .htaccess) by plik php, kt??ry uploaduje pliki m??g?? dzia??aÄ? swobodnie. WyglÄ?da?? on tak:

<IfModule mod_security.c>
<Files async-upload.php>
SecFilterEngine Off
SecFilterScanPOST Off
</Files>
</IfModule>

Round 2:

Po wrzuceniu pliku na serwer okaza??o siÄ? ??e niestety nadal WordPress nie chce wsp????pracowaÄ? (Cannt move file from temporarty dir…). Zatem runda druga polega??a na zabawie CHMOD. 777 na ca??y katalog wp-content/uploads i wszystkie wewnÄ?trzne. Nic niestety nie pomog??o.

Round 3:

Doczyta??em w komentarzach wpisu na jakim?? blogu ??e na jego serwerze trzeba by??o opr??cz modrewrite wgraÄ? beta wersje SWFUpload. No to do dzie??a. Pliki zosta??y podmienione. Refresh. Upload Image. Browse. OMFG No!!! WiÄ?c wydaje wam siÄ? ??e da??em siÄ? pokonaÄ? WordPress’owi przez knockout techniczny? Pozbiera??em siÄ? i przystÄ?pi??em do rundy 4.

Round 4

Po przekopaniu forum WordPressa. Przeszed??em znowu do ofensywy. Pomy??la??em ??e je??li ten b??Ä?d by?? ju?? w RC to mo??e rozwiÄ?zanie z RC pomo??e:

<IfModule mod_security.c>
SetEnvIfNoCase Content-Type \
„^multipart/form-data;” „MODSEC_NOPOSTBUFFERING=Do not buffer file uploads”
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on No
</IfModule>

No i zn??w by??em w b??Ä?dzie.

Final Round!

Wyczerpany i rozgoryczony przegranymi 3 rundami i zmarnowanymi 3 godzinami na research o usuwaniu tego buga z WP2.5. Otwar??em klienta FTP, Wys??a??em plik o nazwie: wordpress-2.3.3.tar.gz i zapu??ci??em: tar zxvf wordpress-2.3.3.tar.gz

Werdykt SÄ?dzi??w:

Wstrzymajcie siÄ? z WP2.5, no chyba ??e chcecie sprawdziÄ? czy na waszym hostingu zadzia??a. W moim wypadku straci??em ok. 3 godzin. Ma fajny niebiesko-szaro-granatowy panel admina i ??miesznie trzyma has??a w bazie, ale to chyba nie pow??d ??eby mieÄ? bloga, bez mo??liwo??ci wrzucania grafiki. Jak chcecie sie pobawiÄ? to zapraszam. I tak DownGrade was nie ominie.

Bibliografia

Twitt