Tworzenie Workflow programu Dreamweaver CC i WordPress

dorastałem jako kujon chemii i nadal żywo pamiętam dreszczyk posypania żelazem na moim mini palniku Bunsena, aby zobaczyć błyszczące fajerwerki. Pomysł, że dwa elementy mogą połączyć się w tak spektakularny efekt, był dla mnie oszałamiający. Doświadczyłem tej samej radości synaptycznej, kiedy odkryłem, jak WordPress i Dreamweaver zostały stworzone dla siebie nawzajem.

WordPress jest bezsprzecznie najpopularniejszym CMS w użyciu. Z lwią częścią rynku (47.5% najlepszych witryn 10k, według BuiltWith.com), szeroki wachlarz szablonów i wtyczek, nie wspominając o stale rozwijającej się łatwości użytkowania, WordPress oferuje bezpośrednią drogę do szerokiego spektrum miejsc docelowych. Ale co, jeśli nie chcesz iść dokładnie tam, gdzie szablon WordPress mówi, że powinieneś? Co zrobić, jeśli twój Klient—lub twój osobisty zmysł projektowania—wymaga niestandardowej obecności online? Pozwól, że przedstawię ci najlepszego partnera w dziedzinie projektowania i kodowania, o którym WordPress nigdy nie wiedział: Dreamweaver CC.

jestem wielkim fanem workflow Dreamweaver / WordPress i od lat łączę te dwa podstawowe elektronarzędzia, aby tworzyć witryny dla klientów, którzy potrzebują możliwości zarządzania treścią wraz ze spersonalizowanym wyglądem. Uważam, że program Dreamweaver doskonale nadaje się do tego zadania, nie tylko jako silnik projektowy do doskonalenia strony frontowej, ale także jako wydajne środowisko kodowania do obsługi niestandardowych, nieuchronnie niezbędnych funkcji PHP.

Zaleta WordPress: Dreamweaver CC

co wnosi do programu Dreamweaver, co sprawia, że jest on tak dobrze przystosowany do tworzenia WordPressa? Kluczem jest połączenie podglądu na żywo i obsługi PHP. WordPress to framework PHP / MySQL, a zdolność programu Dreamweaver do przetwarzania języka po stronie serwera ma kluczowe znaczenie. Funkcja Live View programu Dreamweaver wykonuje kod PHP, integruje dane MySQL i wyświetla wyjściowy projekt HTML5 i CSS 3 z dokładnością zgodną z przeglądarką-a wszystko to jest interaktywne i edytowalne.

WordPress to niezwykle złożona aplikacja do tworzenia szablonów, która zależy od prawie 100 dołączonych i przeplatanych oddzielnych plików w celu wygenerowania pojedynczej strony. Skąd mam to wiedzieć? Po prostu otwórz indeks.plik php z katalogu głównego witryny WordPress i umożliwia programowi Dreamweaver wykrywanie dynamicznie powiązanych plików. Wkrótce zobaczysz wiele dostępnych plików-PHP, CSS, JavaScript i XML—na szczycie okna dokumentu na pasku narzędzi pliki powiązane. Program Dreamweaver nie tylko zapewnia dostęp do każdego z nich, ale także przetwarza je wszystkie i wiernie prezentuje renderowany wynik. Bardzo potężny.

filtrowanie podstawowych plików

oczywiście dostępność tak dużej liczby plików może być szkodliwa, gdy próbujesz udoskonalić odpowiedni CSS lub inny plik. Program Dreamweaver CC zawiera idealne narzędzie do kierowania wybranych plików: Filtruj pliki powiązane. Ta funkcja ułatwia wyświetlanie tylko niektórych typów plików (takich jak PHP lub JavaScript) lub pojedynczych plików. Rutynowo używam niestandardowej opcji filtrowania tej funkcji, aby pracować tylko na stronach CSS, indeksu, nagłówka i stopki mojego motywu, w ten sposób:

*.css; index.php;Nagłówek*; Stopka*

https://blog.adobe.com/media_96f5f722920d6ba831d715073c8763583b6dfe1e.gif

po wpisaniu w polu niestandardowy filtr okna dialogowego na pasku narzędzi pliki powiązane wyświetlane są tylko potrzebne pliki—w tym te z aktywnych motywów lub szablonów podrzędnych. Teraz mogę pracować z kodem w widoku podzielonym, a szybkie odświeżanie przedstawia wszelkie aktualizacje w Widoku aktywnym.

szybka stylizacja

integracja z CSS jest jeszcze ściślejsza, a zmiany wprowadzone w panelu projektant CSS programu Dreamweaver natychmiast wchodzą w życie. Oprócz oferowania pełnej palety właściwości CSS, interfejs zapewnia bezpośredni dostęp do wielu źródeł, nawet tych używanych w zapytaniach o media, dzięki czemu możesz mieć pewność, że pracujesz z odpowiednim plikiem CSS.

https://blog.adobe.com/media_504fd2693d1ae75005819cc5acb5dcf82f56ed76.gif

co najważniejsze, dzięki nowo opracowanemu podglądowi na żywo jest to dość łatwe, aby dokładnie określić, jakie obszary ekranu lub elementy należy rozwiązać. Wystarczy przejść do żądanej strony za pomocą funkcji Obserwuj Link, a następnie włączyć tryb inspekcji. Program Dreamweaver bezbłędnie przetwarza stronę WordPress,a następnie podświetla odpowiedni selektor CSS i jego właściwości w celu modyfikacji wskaż i kliknij. Bardziej szczegółowe zmiany są dostępne po kliknięciu prawym przyciskiem myszy, gdy przejdziesz do kodu.

podpowiadanie kodu WordPress

mówiąc o kodzie, oprócz ogólnej kompatybilności ze wszystkimi aplikacjami PHP, program Dreamweaver CC zapewnia również wsparcie dla określonych funkcji WordPress. Ponieważ nie wszystkie projekty są witrynami WordPress, ta ukierunkowana funkcja jest włączona na podstawie witryny po witrynie, wybierając witrynę > podpowiedzi kodu dla witryny. Kolejne okno dialogowe, które zostanie otwarte, wykrywa instalację i automatycznie wybiera WordPress, a także odpowiedni korzeń kodu. Szczerze mówiąc, w większości scenariuszy wszystko, co musisz zrobić, to uruchomić polecenie, otworzyć okno dialogowe i kliknąć OK: reszta jest automatyczna. Teraz Wskazówki dla wszystkich funkcji WordPress, wraz ze składnią i krótkim opisem pop-up podczas kodowania.

http://blogs.adobe.com/creativecloud/files/2015/02/code-hint.png

przygotowujemy się na Dreamweaver i WordPress workflow

więc co trzeba zrobić, aby rozpocząć pracę z Dreamweaver i WordPress? Zaskakująco mało. Oto kluczowe kroki:

Skonfiguruj Apache, PHP i MySQL

aby poprawnie obsługiwać WordPress, potrzebujesz lokalnego serwera www (zazwyczaj Apache) wraz z możliwościami MySQL i PHP, zbiorczo znanego jako stos AMP.Istnieją dwie podstawowe trasy, które można podjąć, aby spełnić ten wymóg: oddzielne komponenty vs. pakiet oprogramowania. Instalowanie i włączanie oddzielnych komponentów (serwer Apache, MySQL, PHP i zwykle program do zarządzania bazami danych, taki jak phpMyAdmin) trwa dłużej i wymaga większej wiedzy technicznej, ale oferuje większą kontrolę.Instalacja pakietu oprogramowania, takiego jak MAMP (Mac i Windows) lub Wampserver (tylko Windows), jest procesem kompleksowym, łatwym w użyciu, ale rezygnuje ze szczegółowego systemu management.Lynda.com oferuje kurs, który obejmuje całe nabrzeże AMP, a autor David Gassner przeprowadzi Cię przez każdy ze scenariuszy, wraz z rozwiązywaniem problemów. (Jeśli nie jesteś Lynda.com członek, otrzymaj 10 dni za darmo, aby zobaczyć ten kurs i inne, w tym moje własne kursy Dreamweaver / WordPress.)

Utwórz bazę danych

gdy środowisko programistyczne się rozwija, musisz utworzyć bazę danych dla instalacji WordPress—przystawka z każdym programem menedżera baz danych. Możesz nazwać bazę danych, jak chcesz; zazwyczaj korzystam z czegoś opartego na klientach, ponieważ lokalnie rozwijam wiele witryn WordPress. A baza danych to wszystko, czego potrzebujesz: wszystkie tabele i schemat są tworzone dla Ciebie podczas instalacji WordPress.

Zdefiniuj witrynę programu Dreamweaver

witryna programu Dreamweaver powinna znajdować się w folderze w lokalnym katalogu głównym, aby można ją było przeglądać za pomocą adresu internetowego http://localhost/. (Uwaga: w zależności od konfiguracji serwera Apache może być konieczne dołączenie numeru portu.). Ponadto wymagany jest serwer testowy, który określa lokalny root sieci web, a także model serwera PHP.

Skonfiguruj WordPress w swojej witrynie Dreamweaver

zawsze pobieram najnowszą wersję z WordPress.org podczas rozpoczynania projektu. Framework jest często aktualizowany o wersje minor (zorientowane na błędy) i major (ulepszone funkcje). Bycie na bieżąco jest obecnie szczególnie ważne z punktu widzenia bezpieczeństwa; zespół WordPress jest dość czujny we wzmacnianiu wszelkich postrzeganych luk w zabezpieczeniach. Zawartość pobranego archiwum przechowuje się w folderze witryny lokalnej programu Dreamweaver. Jeśli witryna jest całkowicie napędzana WordPress, umieść pliki w katalogu głównym; jeśli integrujesz blog WordPress z witryną, zachowaj wszystkie pliki WordPress we własnym folderze poza korzeniem witryny.

zainstaluj WordPressa

mimo że jest to miejsce, w którym odbywa się cała rzeczywista praca, instalacja WordPressa jest prawdopodobnie najłatwiejszym krokiem, dzięki naleganiu framework na niezawodne, bezmyślne, łatwe w obsłudze podejście.Po prostu przejdź do folderu wp-admin w swojej witrynie (z adresem URL takim jak http://localhost/My_WP_DW_Site/wp-admin/) i jesteś wyłączony.WordPress wykryje brak pliku konfiguracyjnego i potwierdzi, że chcesz go utworzyć. Gdy to zrobisz, musisz wprowadzić pewne podstawowe informacje, takie jak nazwa bazy danych i poświadczenia. Następnie, jeśli poprawnie wykonałeś poprzednie kroki, Powitasz jednym z najbardziej satysfakcjonujących komunikatów instalacyjnych, jakie kiedykolwiek powstały: „w porządku Sparky!”To sprawia, że uśmiecham się za każdym razem. Jeszcze jedno kliknięcie i instalacja jest zakończona: jesteś gotowy, aby zalogować się i rozpocząć pracę z WordPress.Po stronie programu Dreamweaver upewnij się, że jesteś w Widoku aktywnym i otwórz indeks WordPress.php. BAM! Jest Twój domyślny motyw WordPress i przykładowy post. Techno-Abrakadabra.

świat możliwości ujawniony

teraz prawdziwa zabawa zaczyna się, gdy zaczynasz odkrywać obie strony przepływu pracy: Dreamweaver i WordPress. I jest mnóstwo rzeczy, które możesz zrobić z obydwoma, w tym motywami dziecięcymi, wtyczkami, niestandardowymi stronami, a nawet spersonalizowanym interfejsem administracyjnym WordPress, pulpitem nawigacyjnym. Program Dreamweaver CC poradzi sobie ze wszystkim-od projektowania CSS po funkcje PHP. Spróbuj i sprawdź, czy nie wywoła reakcji chemicznej.