2014-06-120 komment
Olvass tovább link hozzáadása az oldaladról kimásolt szöveghez
A weben a tartalom megosztás nagy része „másolás/beillesztés” módszerrel történik. Biztosan találkoztunk már olyan oldallal, ahol ha kimásoltunk egy szöveget a tartalomból, akkor nem csak a kimásolt részt kaptuk vissza. Ilyenkor a hozzáfűzött szöveg általában egy cselekvésre ösztönző rövid mondat egy linkel kiegészítve.
Ennek a megoldásnak van jó és rossz oldala is. SEO szempontjából egész jó módszer, hiszen sok hivatkozás mutat majd így az oldalunkra, valamint az így megosztott tartalmat nem lesz nehéz felkeresnie az érdeklődőknek.
Azonban ez a módszer sok esetben bosszantó is lehet, például ha sokszor másulunk egy adott oldalról, ahol alkalmazzák ezt a megoldást. Véleményem szerint a legnagyobb probléma, hogy a felhasználó nem tudja, hogy a kimásolt szöveget más formában kapja vissza, hiszen nem ez a megszokott megoldás.
A módszer használata, mint oly sok dolog számos tényezőtől függ és nekünk kell eldöntenünk, hogy használjuk-e, vagy sem.
Megvalósítás
function addLink() {
if (window.getSelection().containsNode(document.getElementsByClassName('content')[0], true)) {
var body_element,
selection,
pagelink,
copy_text,
new_div;
body_element = document.getElementsByTagName('body')[0];
selection = window.getSelection();
pagelink = " - Olvass tovább a következő címen: <a href='http://blog.webshark.hu'>webshark.hu</a>";
copy_text = selection + pagelink;
new_div = document.createElement('div');
new_div.style.left = '-99999px';
new_div.style.position = 'absolute';
body_element.appendChild(new_div );
new_div.innerHTML = copy_text;
selection.selectAllChildren(new_div);
window.setTimeout(function() {
body_element.removeChild(new_div);
},0);
}
}
document.oncopy = addLink;
</script>
A függvény hívását a dokumentum oncopy eseményéhez kötjük, ami ahogy a neve is utal rá, akkor fut le, ha valaki szöveget másol a dokumentumunkból.
A függvény elején található feltétellel meghatározzuk, hogy csak a content osztály kijelölővel rendelkező elemeinken fusson le a kijelölés, ami ebben az esetben a tényleges szöveges tartalom.
Az if-ben található window.getSelection()-el visszakapjuk a kijelölt objektumot, a containsNode-al pedig ellenőrizzük, hogy a kijelölés a content class-al ellátott területen belül található-e.
Ezt követően létrehozzuk a kijelöléshez hozzákapcsolandó szöveget, amit aztán egybefűzünk a kijelölés szövegével. Mivel a kijelölésünket, csak úgy tudjuk módosítani, hogy egy meglévő elemmel és annak tartalmával lecseréljük az aktuális kijelölést, létre kell hoznunk egy új HTML elemet amibe innerHTML-el beillesztjük az új szövegünket. Ezt az elemet a kijelölés frissítése után töröljük!
WordPress
WordPress esetében a fenti kódot functions.php-n vagy egyedi bővítményen keresztül is beilleszthetjük. Ehhez használjuk a wp_head akció hook-ot, az alábbi módon!
// Ide jön a JS kód, ne lezárni, majd újra megnyitni a PHP kódblokkot!
}
add_action( 'wp_head', 'add_read_more_text');
Összefoglalás
Főként a rendszerünkön múlik, hogy milyen hivatkozást állítunk elő. Ha a sablonfájl fejlécében helyezzük el a kódot, úgy könnyedén adhatjuk hozzá a CMS-ünk által nyújtott, a megfelelő hivatkozás lekérdezésére szolgáló függvényeket.
