RSS
RSS

Szybsze Pisanie HTML w WordPressie


Kategorie: Optymalizacja, Pozycjonowanie, Treść, Tworzenie stron, WordPress, Wszystkie

9

TinyMCE zazwyczaj robi sieczkę z kodu strony, więc ja piszę swoje artykuły w czystym HTMLu

Przyznam jednak, że nie jest to do końca wygodne - napisanie całego znacznika a href, albo <strong style="font-weight:normal"> (używam go do pozycjonowania) trochę trwa.

Przyspieszające pisanie przyciski

Dzięki uprzejmości Agnieszki trafiłem na opis, jak stworzyć odporne na aktualizacje WP przyciski w edytorze WordPressa przy wyłączonym edytorze WYSIWYG (część przycisków i tak zostaje).

Dodałem więc niżej przedstawiony kod kod do pliku functions.php motywu, którego używam. Powoduje on pojawienie się nowych przycisków w edytorze (także dla custom post types; ich wciśnięcie raz i drugi powoduje wstawienie początku i końca tagu):

  • strong style="font-weight:normal", dostępny także po wciśnięciu Alt+s
  • h2, dostępny także po wciśnięciu Alt+h
  • a href, dostępny także po wciśnięciu Alt+a
  • p, dostępny także po wciśnięciu Alt+p
  • span style="font-weight:bold", dostępny także po wciśnięciu Alt+b (używam go, gdy chcę pogrubić tekst, ale nie zwroćić na niego uwagi wyszukiwarki)
  • <!--more-->, dostępny także po wciśnięciu Alt+m

Oprócz tego mam jeszcze przycisk pozwalający szybko wstawić div class="info", którego używam do wyróżniania tekstu. Może Ty też masz jakiś specjalny znacznik?

Aby WordPress nie mieszał w moim kodzie, używam pluginu Raw HTML, który wyłącza automatyczne tworzenie paragrafów, konwersję znaków i inne utrudniacze pisania.

Polecam użycie takiego rozwiązania - bardzo skraca czas pisania :)

Kod quicktag buttons do wklejenia w functions.php

function fc_add_quicktags()
{
?>
<script type="text/javascript" charset="utf-8">
// <![CDATA[

if (edButtons && jQuery)
{
amount = edButtons.length;
i = amount;

var my_buttons = [
['ed_strong', 'Strong: s', '<strong style="font-weight:normal">', '</strong>', 's'],
['ed_h2', 'h2: h', '<h2>', '</h2>', 'h'],
['ed_a', 'a: a', '<a href="', '" rel="nofollow">', 'a'],
['ed_p', 'p: p', '<p>', '</p>', 'p'],
['ed_span', 'Bold: b', '<span style="font-weight:bold">', '</span>', 'b'],
['ed_rmore', 'More: m', '<!--more-->', '', 'm']
];

jQuery.each(my_buttons, function(index, button) {
edButtons[i ] = new edButton(button[0], button[1], button[2], button[3], button[4]);
});

i = amount;
jQuery(document).ready(function(){
jQuery.each(my_buttons, function(index, button) {

jQuery("#ed_toolbar").append('<input type="button" class="ed_button" onclick="edInsertTag(edCanvas, ' (i ) ');" value="' button[1] '" id="' button[0] '"title="' button[1] '" accesskey="' button[4] '" />');
});
});
}
// ]]>
</script>
<?php
}
add_action( 'edit_form_advanced', 'fc_add_quicktags' );
add_action( 'edit_page_form', 'fc_add_quicktags' );

Komentarze

Nie znałam pluginu Raw HTML, właśnie przeglądam jego kody, żeby dowiedzieć się jakie dokładnie konwersje wyłącza. Dzięki za info o nim.

Odpowiadając na pytanie o używanie specjalnych znaczników. Na swoje potrzeby używam wstawiając linię <div class="clear"></div>, żeby zablokować opływanie obrazka ustawionego jako float przez treść kolejnego akapitu (który chcę rozpocząć już po obrazkiem).

Na potrzeby klientów – do wstawiania przypisów dolnego i górnego, czyli znaczników sup i sub.

Czesc, Aga :)

Ciesze sie, ze Raw HTML sie przydal :)
Co do oplywania – jest duzo prostsza metoda. Ustawiasz dla zewnetrznego znacznika overflow:auto i juz :)
Np.
<div class="wpis" style="overflow:auto">
<img src="" style="float:left">
</div>

Dzieki temu nie musisz we wpisie dodawac extra znacznika clearujacego :)

Krzysiek, dzięki za radę.

Overflow auto może powodować nieoczekiwane pojawienie się suwaka, dlatego jeśli mam poszczególne bloki na divach, to używam innej metody (z użyciem :after). A dodatkowego bloku z klasą clear (i stającą za nią regułą clear: both w CSS) używam w przypadkach, kiedy artykuł nie jest podzielony na bloki (nie ma w nim div’ów), składa się z ciągu znaczników takich jak h2, h3, h4, akapitów i “pływających” zdjęć. Metoda ta nie jest elegancka, bo tworzę “sztuczną” strukturę w HTML, jednak opakowywanie fragmentów z obrazkiem w osobnego div’a też niejako byłoby sztucznym działaniem (w moim konkretnym przypadku oczywiście).

Ja sie nie spotkalem, zeby overflow:auto robilo suwaki, ale skoro tak mowisz, to pewnie tak czasem jest :)
Widze, ze juz dobrze rozgryzlas problem :)

Pozdrawiam!

Tak, właśnie najgorsze jest to, że to nie zawsze wychodzi od razu. Nie chcę się teraz wdawać w szczegóły, ale może być i tak, że w przyszłości zmienisz inne reguły, zapomnisz o czujności na overflowa, a akurat te Twoje inne zmiany spowodują pojawienie się suwaków.

Krzysiek, tak z innej beczki. Widzę, że u Ciebie pojawia się możliwość naciśnięcia “Reply” tylko na jednym poziomie zagnieżdżenia komentarzy. Nie znam tego motywu, ale być wystarczy zmienić wartość w Ustawienia->Dyskusja w polu “Pozostałe ustawienia komentarzy” – Włącz x poziomowe zakorzenianie komentarzy. No chyba że celowo ustawiłeś to w ten sposób.

Szczerze, to ten motyw nie jest zbytnio dopracowany. Pomeczylem go troche, ale komentarze sobie odpuscilem. Dlatego nie wyglada i nie funkcjonuje idealnie. To moj blog “na szybkiego” i nie przywiazuje do jego wizualnej strony zbytniej wagi :) Takze dzieki za rade, ale to wymaga trochu czasu, a wole go poswiecic na inne moje serwisy :)

Pozdrawiam!

Doskonale rozumiem bolączki. Tak to już z tymi motywami bywa.

Sorry, że tak Ci wiercę dziurę w brzuchu, mam jeszcze jedną uwagę. Widzę, że w moim komentarzu zostały automatem podlinkowane hasła “zdjęć” i “działaniem”.

Ja bym zrezygnowała z takiej ingerencji w komentarze innych osób. Czytelnicy mogą pomyśleć, że to autor komentarza pisze komentarz tylko po to, żeby zrobić reklamę własnym “partnerom biznesowym”, a samym autorów komentarzy takie automatyczne wstawki mogą zniechęcić do komentowania w przyszłości.

Sluszna uwaga, ale i tak zal mi czasu na grzebanie w tym, niestety.

Stary, dzięki! Jestem hardcorowcem i również piszę w czystym HTMLu. Zaoszczędzony czas dzięki twoim poradom jest bezcenny.

Komentuj

Subscribe without commenting