Manipulowanie DOM w WordPress za pomocą JQuery
Opublikowany: 2023-02-12Dzięki platformie open-source WordPress i tętniącej życiem społeczności programistów tworzenie motywów dla platformy ma dość szeroki zasięg. Poruszanie się po wszystkich elementach i treściach wymaganych do zbudowania witryny WordPress może być jednak trudne, w zależności od wiedzy i doświadczenia programistycznego.
Na szczęście Document Object Model (DOM) może ułatwić manipulowanie lub przeglądanie kodu HTML witryny. DOM działa poprzez umożliwienie tworzenia drzewa składającego się z różnych węzłów lub obiektów. Otwiera to możliwość zmiany sposobu wyświetlania, struktury lub funkcji witryny przy użyciu bibliotek JavaScript, takich jak jQuery.
W tym artykule wyjaśnimy, czym jest DOM i dlaczego warto go używać. Następnie przedstawimy kilka standardowych technik manipulacji jQuery do używania DOM z WordPress. Zanurzmy się!
Co to jest DOM?
Mówiąc najprościej, DOM to interfejs programowania aplikacji (API) dla HTML. Tworzy drzewo obiektów reprezentujących zawartość i strukturę strony internetowej. Jest to również platforma i skrypt niezależny od języka, co czyni go dość wszechstronnym. Gdy DOM reprezentuje kod źródłowy HTML w ten sposób, udostępnia go, aby różne języki programowania mogły się z nim łączyć.
Dlaczego warto używać DOM?
Jako użytkownik WordPressa prawdopodobnie widzisz DOM w akcji za każdym razem, gdy napotykasz dynamiczną interaktywność. Może to obejmować zwrócenie błędu w przypadku przesłania formularza z brakującymi informacjami. Suwaki zawartości to kolejny przykład używanego modelu DOM:
Deweloperzy mogą używać DOM do aktualizowania i zmieniania prawie wszystkich elementów na stronie internetowej. Możesz go używać do budowania dokumentów i poruszania się po ich strukturze. DOM może być również używany do dodawania, modyfikowania lub usuwania elementów i obiektów.
Manipulacja DOM za pomocą JQuery
Żeby było jasne, DOM i HTML to nie to samo, chociaż powinny zawierać te same elementy. DOM jest modelowaną reprezentacją kodu źródłowego HTML i może być zmieniany przez JavaScript po stronie klienta.
Poniżej przyjrzymy się metodom w bibliotece jQuery do testowania niektórych technik manipulacji DOM. Pamiętaj, że różne przeglądarki obsługują DOM na swój własny sposób, ale nie musisz robić nic specjalnego, aby zacząć z niego korzystać. Wszystkie przeglądarki używają jakiejś formy DOM, aby strony były dostępne dla JavaScript.
Techniki manipulacji DOM
DOM może być używany na wiele różnych sposobów. Aby zilustrować jego elastyczność, przyjrzyjmy się sześciu technikom, które pomogą Ci rozpocząć pracę z tym użytecznym interfejsem API.
1. Metoda przed().
Zgodnie ze swoją nazwą metoda before() jest używana, gdy chcesz wstawić dowolny element przed innym elementem docelowym, jak wskazano w kodzie.
W tym przykładzie metoda może zostać użyta do dodania kwadratowego elementu z tekstem nad wyznaczonym elementem, takim jak przycisk, po jego kliknięciu:
$(this).before( "<div class='square'>Kolejny kwadrat</div>" );
Podczas korzystania z tej metody należy wziąć pod uwagę rozmieszczenie i układ strony. Będziesz chciał się upewnić, że nowy element nie zepsuje twojego układu ani nie spowoduje problemów wizualnych.
2. Metoda After().
W ten sam sposób, w jaki metoda before() pozwala wstawiać elementy przed innym wskazanym elementem, metoda after() pozwala na coś przeciwnego. Na przykład można go użyć do dodania elementu tuż pod przyciskiem po wybraniu przycisku:
$(this).after( "<div class='square'>Kolejny kwadrat</div>" );
Dodawanie interaktywnych treści poprzez manipulowanie DOM za pomocą jQuery w ten sposób to solidny sposób na uzyskanie interaktywności bez utraty szybkości procesu.
3. Metoda Append().
Zamiast pojawiać się pojedyncze nowe elementy, możesz dodać swój nowy element do istniejącego. Na przykład, może chcesz dodać tekst „Wszystkiego najlepszego!” w kolorowym obszarze po każdym kliknięciu określonego przycisku.
Aby dołączyć nowy element do istniejącej zawartości elementu docelowego, należy wstawić polecenie append() jQuery w kodzie źródłowym HTML:
$( ".box" ).append( "<p>Wszystkiego najlepszego!</p>" );
Ta metoda dodaje manipulację na końcu elementu wskazanego w łańcuchu zamiast umieszczania go przed lub po. W kontekście pełnego dokumentu HTML możesz zobaczyć, jak przebiega manipulacja:
<!doctype html>
<title>Przykład</title>
<styl>
.skrzynka {
tło: pomarańczowe;
kolor biały;
kolor biały;
szerokość: 150 pikseli;
wypełnienie: 20px;
margines: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<skrypt>
$(funkcja() {
$( "przycisk" ).click( funkcja() {
$(this).after( "<div class='box'>Wszystkiego najlepszego!</div>" );
});
});
</script>
<button>Utwórz pudełko</button>
Ta technika daje prostą opcję tworzenia interaktywności w ograniczonej przestrzeni. Pamiętaj tylko, że przy tej konkretnej metodzie manipulacje pojawią się jako rozszerzenie wskazanego elementu, a nie jako nowe pojedyncze elementy.
4. Metoda Prepend().
Jako zrównoważenie metody append() prepend() doda element na końcu dowolnego elementu docelowego wskazanego w poleceniu jQuery:
$( ".banner" ).prepend( "<p>Wszystkiego najlepszego!</p>" );
W tym przykładzie tekst „Wszystkiego najlepszego!” pojawi się na początku banera wskazanego w ciągu kodu.
Warto zauważyć, że te metody (w tym before() , after() i append() ) są akceptowalnymi podejściami do prostych zastosowań. Zalecamy jednak inne techniki w przypadku bardziej złożonych wstawek.
5. Metoda Clone().
Następnie metoda clone() jest dość potężną opcją pod względem manipulowania DOM za pomocą jQuery. Podczas gdy poprzednie cztery techniki umożliwiają wstawianie elementów i przenoszenie ich, clone() umożliwia skopiowanie elementu, usunięcie go z pierwotnego miejsca i ponowne wstawienie lub dołączenie w innym miejscu.
Na przykład ta linia oznacza, że oryginalny element box pozostanie tam, gdzie jest, podczas gdy jego klon zostanie dołączony do elementu trójkąta:
$( ".box" ).clone().appendTo( ".trójkąt" );
Wadą tej metody jest to, że może ona spowodować zduplikowanie atrybutu id elementu. Te atrybuty mają być unikalne. Możesz uniknąć tego problemu, używając atrybutów class jako identyfikatorów i oszczędnie stosując metodę klonowania.
6. Metoda Wrap().
Wreszcie, metoda wrap() jest przydatna, jeśli chcesz zawinąć element wokół istniejącego łańcucha. Na przykład możesz umieścić kilka akapitów w nowej strukturze HTML, identyfikując klasę i wskazując, jaka struktura jest wdrażana:
$( ".targetclass" ).wrap( "<div class='new'></div>" );
Dzięki tej technice tworzysz element <div> wokół dowolnego elementu pasującego do klasy docelowej w łańcuchu wrap() . Chociaż możesz stworzyć zawijanie o głębokości kilku poziomów, powinieneś upewnić się, że jest tylko jeden najbardziej wewnętrzny element.
Rozwiązywanie problemów z plikiem DOM
Jeśli chodzi o pracę z DOM, chcemy podkreślić jeden kluczowy aspekt, na który warto zwrócić uwagę. Aby Twoje strony ładowały się szybko i unikały niepotrzebnego kodu (zwłaszcza jeśli tworzysz motyw), pamiętaj, aby nie używać żadnych elementów, które nie są częścią drzewa DOM.
Jeśli nie masz pewności, czy element jest częścią modelu DOM, czy nie, możesz sprawdzić każdy element w przeglądarce na interfejsie swojej witryny. Możesz sprawdzić elementy na stronie i określić, gdzie są one zawarte w drzewie DOM.
Jest to szczególnie przydatne, gdy inny skrypt zmienił oryginalny kod HTML Twojej witryny. W przeciwnym razie Twój HTML i DOM mogą czasami wyglądać dokładnie tak samo.
Przeglądaj inne zasoby i narzędzia WP Engine
Jeśli myślisz o DOM jako o organicznej części swojej witryny, żywym zasobie, który reaguje na kod źródłowy HTML, siła jego dostępności jest zdumiewająca. Dlatego zrozumienie modelu DOM i tego, jak można go wykorzystać do ulepszenia projektów, może pomóc przenieść witrynę na wyższy poziom.
Manipulowanie DOM za pomocą jQuery podkreśla piękno platformy open source WordPress. Tutaj w WP Engine rozumiemy, jak wysokiej jakości zasoby dla programistów mogą mieć znaczenie. Dlatego oferujemy wiele pomocy dla użytkowników WordPres, wraz z najlepszymi planami hostingowymi!