de ce? Tutorial » Wordpress Write Post

Tutorialul asta e despre cum sa scrii si optiunile disponibile pentru scriere in Wordpress. Nu e vorba de continut, ci de actul scrierii in sine. Se da pagina de scriere Write » Write Post si o discutie de complexitate medie despre ce si cum se poate face in aceasta pagina.

Postul urmeaza sa vorbeasca despre multe dintre elementele de baza, cu amanunte utile (sper) despre fiecare. In prima faza am vrut sa structurez postul pe pagini, dar arata nasol asa ca va fi un carnat lung din care sper ca se va intelege ceva :) Vor fi afisate, in ordine, informatii despre:

• Caseta de editare
• Quicktaguri
• Utilizare quicktaguri
• Adaugare poze
• Formatare poze
• Poze si linkuri
• Video
• Categorii
• Trackbackuri si pingbackuri
• Protejare
• Posturi pentru mai traziu

In speranta ca cele cateva (multe) ore necesare pentru realizarea postului se vor transforma intr-un text util si vor ajuta la intelegerea intr-o masura mai buna a acestei platforme superbe de blogging - Wordpress, urez lectura placuta :)

Ah, inca ceva - postul nu se adreseaza numai celor care folosesc wordpress-ul instalat pe hostul propriu, ci poate fi util in cateva parti si celor de pe wordpress.com, ori, de ce nu, chiar unor viitori utilizatori ai platformei de blogging.

Caseta de editare

Aici urmeaza sa apara textul si continutul postului propriu zis (despre formatarea liniilor am mai scris) - eu prefer modul simplu, fara rich editor (tot in postul amintit se vede cum se dezactiveaza), asa se explica modul de afisare un pic diferit al interfetei mele de scriere care arata asemanator cu modul “code”.

Layout-ul de baza arata in felul urmator:

E dragut ca la ultimele versiuni de wordpress casetele se pot aranja cu drag and drop oricum in pagina, aranjarea prezentata e optiunea mea si e facuta dupa stilul propriu de lucru. Important ar fi ca toate casetele cu optiuni sa fie deschise (nu reduse ca in prezentarea lor din imagine) pentru a nu se uita din vedere vreuna din posibilele setari pentru postul scris.

Quicktaguri

Dintr-un print screen precedent s-a putut observa ca butoanele mele sunt un pic altele decat cele clasice/standard cu care vine wordpress-ul. Dar oricine le poate modifica. Fisierul care controleaza butoanele pentru modul simplu de scriere (asa cum am sa numesc de acum inainte modul de scriere cu rich text editing dezactivat) se gaseste in wp-includes/js/quicktags.js . In primele linii de cod se pot adauga si scoate optiuni si butoane. Daca il vrea cineva pe al meu cu “next page”, “no follow”, “width” si “float” adaugate, adica :

• <!–nextpage–> pentru a impartii posturile lungi in pagini, cum trebuia sa fie si acesta
• rel=”external nofollow” numai bun de adaugat in cadrul tagului a, la linkuri pe care nu vrei sa le urmeze google sau alti spideri
• style=”float:right;” pentru pozele mici din post, le trimite in partea dreapta, lasandu-le inconjurate de text, cum e prima poza din acest text
• width=”450″ util pentru pozele (un pic) mai mari decat spatiul pe latime al paginii de post. Eu folosesc 450px pentru maxima compatibilitate cu toate temele vizuale, o sa revin asupra spectului un pic mai jos

Fisierul se poate gasi aici. O comparatie intre fisierul original si al meu va releva ce trebuie adaugat pentru crearea oricarui quicktag considerat necesar. E vorba de scrierea unui bloc de text in genul asta:

new edButton(’ed_float’
,’float’
,’ style="float:right;" ‘
,”
,”
,-1
);

Unde ed_float e numele butonului, pe a doua linie, float, textul care apare scris pe buton, pe cea de-a treia, tagul propriu zis care va aparea in editor, restul fiind necesare in forma respectiva.

Daca e vorba de un tag html ce trebui deschis si inchis se adauga dupa modelul h3 (Heading 3):

edButtons[edButtons.length] =
new edButton(’ed_h3′
,’h3′
,’<h3>’
,’</h3>’
,”
);

Prima si a doua linie au aceasi semnificatie ca si la quicktagul precedent, in schimb liniile urmatoare difera - contin tagul de inceput si de sfarsit, nu mai sunt goale. Ultima linie cu ghilimele, goala, e folosita pentru adaugarea unei taste rapide pentru quicktag (functoneaza in putine browsere).

Poate ca arata un pic ciudat postul, cu html in el, dupa folosirea quicktagurilor si a modului simplu de scriere, dar, hei, cateva notiuni de html nu strica nimanui :)

Utilizare quicktaguri

Exista doua metode de baza pentru a folosi quicktagurile html (cele care trebuie inchise si deschise).

Una consta in inserarea cuvantului, paragrafului si apasarea tagului dorit, iar cealalta prin deschiderea si inchiderea tagurilor cu cate un click (se pot scrie si manual, dar e o usoara pierdere de vreme).

Bun, de aici incepe distractia. Cea mai simpla si comuna practica:

Adaugare poze

Se da browse dupa fisier, click upload; ramane un ecran de genul asta (daca pozele sunt tinute pe server):

Pentru cei cu pretentii SEO (search engine optimization) recomand editarea numelui si a descierii fiecarui fisier, nu numai denumirea lui intr-un mod logic (chestie pe care o recomand tuturor) - nu are nici un sens sa-ti denumesti o poza cu tine “image00001.jpg”, ii pui numele tau (petre-taranu-in-pijama.jpg) cu liniute in loc de spatii, astfel poate o gaseste cineva cautandu-te pe google.

Cum se face editarea aia a pozelor? Ori inainte de a selecta fisierul de pus in post, in casuta “Title” si “Description”

ori dupa, apasand butonul Edit. E adevarat ca e o metoda care consuma timpul pretios al bloggerului, dar e realmente utila.

habar nu am cine e tipul din poza si nici daca il cheama Petre Taranu, l-am gasit cautand pe google “pijama”

Cei care nu tin pozele pe serverul propriu si le adauga cu ajutorul quicktagului img sunt intrebati oricum de descriere, dar ideal e sa-si boteze si ei fisierele in mod logic si descriptiv.

Formatare poze

Ziceam mai sus de un anumit tag pentru a limita imaginile, practic pentru a le face resize la marimea maxima permisa de tema, si anume width=”450″, cum e in cazul meu. Bun, bun, exista, dar cum se foloseste? Sa presupunem ca imaginea are 600px, mai lata decat permit majoritatea temelor de wordpress sa se afiseze. Selectam Show: Full size, Link to: None. O afisez intreaga si nu am nevoie de link spre ea.

Pe tema go naked 2 se vad doar primii 520px din ea, pe go naked 1 se vede si mai ciudat, iar in IE6 nici nu vreau sa ma gandesc cum se vede. Asta e in fapt principala problema. Pe Internet Explorer 6 sunt multe teme vizuale care pot fi distruse de cate o poza prea mare, Firefox-ul stie cateva instructiuni CSS in plus care ajuta la afisarea elementelor cu continut mai mare decat ele, dar nu e neaparat o solutie. Ce facem atunci sa afisam poza intreaga, sa arate bine si sa nu ne faca praf tema vizuala? O afisam tot full, dar cu link spre file, dar adaugam tagul html limitator si o facem de 450px sau cat e nevoie.

Bun-bun, dar unde vine ala pus intreaba doamna din spate. Simplu: in cadrul tagului <img />, imediat inainte de terminarea lui…

<a href=’http://deceblog.net/uploads/2007/07/600px.jpg’ title=’600px.jpg’><img src=’http://deceblog.net/uploads/2007/07/600px.jpg’ alt=’600px.jpg’ width=’450′ /></a>

Un click mic inainte de /> si o apasare la fel de mica pe butonul dedicat oferit de bara mea quicktag, gata - poza e la dimensiunea maxima suportata de tema, dar lumea poata da click pe ea pentru a o vedea intreaga.

Eu mai practic stilul asta de resize si in cazul pozelor chiar mari, de peste 1000px in latime (inaltimea nu conteaza prea mult, aspectul pozei se pastreaza oricum), pe care prefer sa le pun asa, mai degraba decat ca thumbnail. In cazul respectiv exista o inconvenineta - pagina se va incarca destul de greu pentru ca poza se incarca la dimensiunea ei reala dar e redusa de catre browser la dimensiunea dorita de afisare. Nu prea recomand genul asta de resize-uri.

Poze si linkuri

Pozele stocate pe serverul propriu au in interfata de adaugare 2 setari mari si late: afisare (show) si link. In functie de ce efect se vrea obtinut exista diverse combinatii ce se pot realiza. Despre afisarea in format mare am vorbit mai sus, dar cum e cu restul?

Pentru thumbnailuri e de la sine inteles ca trebuie sa existe link catre fisier (link to file), altfel nu prea are sens afisarea lor, e o greseala destul de des intalnita.

Imaginile postate integral, in schimb, nu prea au nevoie de link spre fisier, nu ajuta cu mai nimic utilizatorul sa vada aceasi imagine la aceasi dimensiune de doua ori, dar pot fi cu link spre alte site-uri. Se insereaza frumos tagul de imagine si se apasa quicktagul link, unde se introduce site-ul dorit.

Dar cum e daca vrem imagine in spatele unui link? In doua feluri. Primul e mai simplu: se pune Title, la fisierul imagine dorit, textul de link ce se vrea afisat (cuvantul “link” in cazul de fata) si se selecteaza Show title si Link to file » Send to editor. Varianta a doua presupune mai multe complicatii. Title si descriere la fisier dupa plac, aceleasi setari show title si link to file, dar title-ul poate fi altul decat textul ce se doreste linkuit. Se trimite in editor imaginea sub forma unui tag a si se incoluieste textul aflat inainte de inchiderea tagului </a>.

<a href=’http://deceblog.net/uploads/2007/07/imagine-simpla.jpg’ title=’imagine-simpla.jpg’>imagine-simpla.jpg</a>

Adica acel imagine-simpa.jpg se incoluieste cu orice alt text.

Mai exista o optiune, pe care nu o recomand, aceea de a pune link spre “Page”. Pe multe dintre versiunile mai vechi de wordpress aceasta optiune nici macar nu se comporta onorabil, dand diferite erori, de la “not found” pana la erori de mysql. Practic ce face aceasta optiune? Mai pune un pas intre imaginea afisata in cadrul postului si imaginea intreaga, creand si o pagina in plus, unde pe unele teme vizuale se pot lasa comentarii, o optiune chiar in plus in opinia mea.

Video

In cazul videourilor exista variante multiple, sunt multe pluginuri care fac treaba, dar mare parte mi se par o pierdere de timp. Trebuie sa copiezi o sectiune din url, nu merg decat cu youtube si googlevideo, cu trilulilu nu, etc. Vezi cazul celor hostati pe wordpress.com, care nu pot pune video-uri din alte parti decat le permite pluginul.

Cum scapam de problema? Tot prin modul simplu de scriere (vezi inceputul tutorialului). Debifezi rich text editorul si poti pune cod de la orice video, fie ca e el pe youtube, google video, trilu, metacafe, myspace, dailymotion, revver etc. Se copiaza codul de “share” oferit de catre serviciile video folosite.

Pot exista diferite erori in cazul primelor incercari din cauza modului de scriere, pentru a evita eventualele probleme se pune un spatiu de cel putin o linie intre text si video, deasupra si de desupt. Nu exista absolut nicio problema daca spatiile sunt prea multe, editorul le va corecta automat. Un video care spune cam acelasi lucru: :)

Categorii

Categoriile sunt din ce in ce mai putin folosite mai nou, sunt la moda tagurile, dar ce nu stiu unii e ca tagurile nu sunt acelasi lucru cu categoriile, tagurile sunt un fel de etichete, deci mult mai individuale decat categoriile, Lorelle avea un post dragut pe tema asta (engleza). Tagurile au diferite moduri de adaugare a lor, au casete speciale, ori se introduc prin intermediul custom fieldurilor, ori pe pun intre niste taguri speciale in post - cum ar fi, nu o sa vorbesc despre ele.

Categoriile in schimb sunt frumoase si utile. Se pot realiza navigari spectaculoase in cadrul blogurilor, bazate pe categorii si functiile asociate lor. Eu sunt in plin proces de structurare logica (si de bun simt) a categoriilor si posturilor din ele, asa ca nu sunt cel mai bun exemplu, dar se poate observa ca am destul de multe categorii, cu relatii parentale intre ele.

Cu ce ma ajuta asta? La viitoarea afisare a url-urilor posturilor cu numele categoriei in ele (viitoare pentru ca inca nu am terminat cu ordonarea categoriilor). Structurarea in schimb imi face viata mai frumoasa, pentru ca nu trebuie sa caut in ordine alfabetica o anume categorie, ci dupa o oarecare logica. Pentru cei care vor sa foloseasca structura pe categorii trebuie sa aibe grija ca selectarea unei sub-categorii nu presupune existenta postului si in categoria parinte, iar selectarea ambelor categorii va face ca postul sa apara de in multe locuri. Categorisirea trebuie gandita un pic.

Cum se obtine acea relatie parentala, cum am numit-o eu, a categoriilor? Din meniul Manage » Categories. La adaugarea unei categorii noi se selecteaza ca parinte (parent) categoria dorita. Adaugarea categoriilor din cadrul postului mi se pare cea mai rapida metoda, dar si cea mai prosta, neavand absolut nici un control asupra categoriei folosite.

Atentie - neselectarea unei caegorii plaseaza postul in categoria default a blogului (se poate seta in optiuni oricare categorie) - la mine e “diverse”

Trackbackuri si pingbackuri

Exista cateva probleme foarte comune: ori nu ajung unde trebuie, ori ajung si unde nu trebuie. Cum se controleaza si ce sunt?

Pinkgbackurile sunt linkuri spre alte posturi si notificari ale acestora prin intermediul unor linkuri cu un fragment din postul tau sub forma de comentariu la blogul linkuit. Multa lume le considera in mod gresit trackbackuri. Nu. Trackbackurile sunt o forma de notificare a altor bloguri sau posturi de bloguri ca exista continut similar ori cu credite, un fel interconectare.

In vreme ce pingabackurile se realizeaza automat (daca exista optiunea de pingback pornita pe postul vizat) in cazul unui link spre alt articol, trackbackurile se pot face si fara a pune un link explicit spre blogul respectiv prin introducerea linkului in casuta trackback existenta in fereastra de scriere. Hai sa pun un trackback catre piticu, el e cel mai notoriu autor care foloseste total aiurea pingbackurile si trackbackurile. :P

Dupa cum am aratat, unii au dezvoltat o afacere spam cu trackbackurile - nu e frumos si de dorit.

Sa vedem cum se folosesc in mod corect pinkgbackurile si trackbackurile. Linkul spre postul la care se face referire se trece in mod normal, dar in acea casuta numita “Trackbacks” se trece linkul de trackback, cel folosit gresit de multi pentru a linkui. Daca nu exista un link anume de trackback la postul respectiv, pe trece linkul normal in casuta dedicata - oricum este descoperit de catre motorul blogului. Ati ramane uimiti sa vedeti ca si platforma blogger recunoaste trackbackurile si le si afiseaza in stilul asta. :)

Ce ne facem cand avem trackbackuri la propriile posturi de la alte posturi in care am facut referire la ce am scris mai demult? Nimic mai simplu decat dezactivarea pingbackului pentru cateva minute la postul vechi, atunci cand dam publish la cel nou. Exista caseta discussion in partea dreapta a ferestrei de scriere cu doua optiuni: allow comments si pings. Pingurile se dezactiveaza la publicarea postului nou si se reactiveaza dupa. Comentariile se dezactiveaza dupa bunul plac :)

Protejare

Daca am vorbit despre dezactivarea comentariilor, era normal sa vorbim in continuare despre protejarea postului, daca prima varianta e utila pentru prevenirea interpretarilor, cum facem sa ascundem cu totul cate ceva de ochii mult prea curiosi si nedoriti, ori poate vrem sa scriem pentru noi si pentru soricei? Post password. Postul va fi afisat doar ca titlu si va cere o parola pentru afisare. Daca gasim cate un fan infocat - ii putem oferi si acestuia parola pentru acces la post.

Atentie - e o diferenta mare intre posturile private si cele protejate prin parola. La Post Status exista 3 optiuni - Published, Draft si Private. Selectand optiunea de post privat, blogul nici macar nu va afisa postul in prima pagina altcuiva decat autorului, chiar si in cazul blogurilor cu mai multi autori. Sfatuiesc pe aceasta cale pe toti cei care sustin ca scriu pentru ei sa foloseasca cu mult spor aceasta optiune. ;)

Dar, din nou, atentie, pentru ca e vorba de probleme sensibile. Cand se selecteaza optiunea private nu se apasa butonul Publish, ci cel de Save, apasarea butonului Publish, in ciuda selectiei a statutului postului ca privat, il va afisa ca post normal in prima pagina a blogului.

Posturi pentru mai traziu

Sunt multe voci care spun ca frumusetea bloggingului poate sta si in posturile nepublicate, cred ca exista o oarecare samanta de adevar. Exista doua moduri de a scrie “pentru mai tarziu”. Publicand postul cu o data din viitor sau lasandu-l “in atelier” ca draft.

Drafturile sunt acele posturi care nu au simtit inca un click pe butonul Publish, au primit doar save si sunt acele posturi care risca sa nu vada lumina si viteza iternetului prea repede - eu am drafturi insiruite pe 3 linii - multe dintre ele le sterg dupa o vreme, fara sa le fi publicat sau revazut, cand observ ca nu mai sunt de actualitate.

Optiunea cea mai interesanta a wordpressului este in schimb postarea in viitor, posturile programate. Nu degeaba se mira cativa prieteni ca am din cand in cand posturi intinse pe toata ziua si noapte, fara un spatiu de somn. Sunt acele posturi programate. Cum se face? Se bifeaza “Edit timestamp” si se trece data dorita in format luna(selectie), zi(numeric), an(numeric) @ ora dorita.

Ce se intampla cu astfel de posturi? Apar pana la data si ora publicarii in dashboard sub denumirea “Scheduled posts”, la fiecare fiind afisat timpul ramas pana la publicare, in ani, luni, zile, ore sau minute. Nu stiu sa existe o limita o posturilor programate.

Incheiere

Postul nu se vrea un ghid complet si nu am pretentia sa fie perfect - accept bucuros orice observatii, completari si critici pe marginea lui, am omis constient o parte dintre optiunile existente, considerandu-le neinteresante ori prea rar folosite - poate pe viitor vor aparea si ele in tutorial daca vor fi considerate de multa lume drept importante.

Textul contine viziunea proprie asupra modului de scriere in wordpress, el cade sub incidenta drepturilor de autor, nu a fost scris in urma unor interese financiare din partea vreunei firme, companii sau platforme de blogging si poate fi copiat partial sau in totalitate cu precizarea sursei, dar nu pentru obtinerea unor avantaje financiare de pe urma lui.