- Tämä aihe sisältää 4 vastaukset, 1 ääni, ja päivitettiin viimeksi 4.12.2023 16:13
toimesta.
- Kommentit
WordPress on sivustoni runko-ohjelmisto. Se on myös runko foorumilisäosalle bbPress. Listaan tässä käyttötarkoituksittain ryhmiteltynä lisäosat.
WordPress ja bbPress hallintatyökalut ja yleisluonteiset lisäosat:
All in One SEO
Hakukonenäkyvyyden parantamiseksi tarkoitettu lisäosa. Käytän lähinnä sivuista annettujen kuvausten luomiseen.
bbPress – Moderation Tools
Lisäosa tuo moderointiin lisävaihtoehtoja.
Broken Link Checker
Lisäosa tarkistaa, onko sivustolla toimimattomia linkkejä ja viittauksia mediaan, jota ei löydy.
CAPTCHA 4WP (Premium)
Kyseessä on Googlen maksullinen roskapostin esto-ohjelma. Se on suunniteltu erityisesti robottien luomien säikeiden ja kommenttien estämiseen.
Crawl Optimization
Lisäosan tarkoitus on poistaa tarpeetonta metadataa sivuilta.
GD bbPress Tools
Lisäosalla saa foorumin kirjautuneille käyttäjille joitakin lisätoimintoja, kuten siteerauksen ja kommenttien allekirjoituksen.
Health Check & Troubleshooting
Ohjelmiston tarkistusohjelma.
LiteSpeed Cache
Palvelimen kanssa yhteistyössä toimiva cache-ohjelma, jonka tarkoituksena on nopeuttaa sivujen latautumista.
Social Login
Mahdollistaa kirjautumisen joidenkin some-tilien avulla.
WordPress-tuontiohjelma
Mahdollistaa tuoda WordPress-sivusto muualta.
Kaikille näkyvään sisältöön vaikuttavat lisäosat:
Advanced Editor Tools
Visuaalinen tekstieditori hallintaosalle (backend) ja näkyville web-sivuille (front-end).
amr shortcode any widget
WordPress käyttää usein pikakoodausta tyyliin ”[shortcode]”. Kun tekstissä on tietty pikakoodi, korvataan pikakoodi esim. jollakin lisäosalla. Lisäosa mahdollistaa minkä tahansa ns. vimpaimen (wigdet) muuttamisen pikakoodiksi. Esim valikko Aiheet hyödyntää vimpaimia pikakoodeja käyttäen.
BBCode Deluxe
Lisää joitakin BBCode-merkkauksia kommentoinnissa käytettäviksi. Olen muttanut eräät koodit sivustolleni räätälöidyiksi.
Breadcrumb NavXT murupolut
Lisäosan avulla on sivun alkuun ja loppuun lisätty sivun hakemistopolku, ns. ”leivänmurut” (breadcrumbs). Sillä helpotetaan sivuston hahmottamista ja sillä navigointia.
Code Snippets
Kyse on oman koodin lisäämisestä foorumiin siten, että se haetaan tietokannasta (yleensä koodi kirjoitetaan functions.php-tiedostoon).
Plugin organizer
Lisäosalla saa määriteötyä lisäosan niin, että se näkyy vain tietyllä sivulla.
Tag Groups
Lisäosalla organisoi avainsanoja ja näyttää ne avainsanalistoina, jotka huomioi koko sivuston.
Widget logic
Lisäosa ns. vimpainten (esim. navigaatio) näkyvyyden hallintaan.
WP Google Search
Kyseessä on sivustokohtainen Google haku. Ole sijoittanut sen sivuston päänavigoinnin yhteyteen.
WP Sitemap Page
Lisäosa luo automaattisesti erilaisia sivustokarttoja.
WPForms Lite
Lisäosalla saa luotua lomakkeita, joille saa Captcha-suojauksen. Tällä hetkellä vain palautesivulla on lisäosalla luotu lomake.
Mediahallintatyökalut:
Add From Server
Jos palvelimella on kuvia, jotka eivät näy mediakirjastossa, lisäosalla voi lisätä ne mediakirjastoon.
Enable Media Replace
Lisäosa mahdollistaa kuvan vaihtamisen tiedostonimeä vaihtamatta.
Imagify
Kyseessä on kuvien pakkausohjelma.
Resize Image After Upload
Kuvien skaalausohjelma.
Media Cleaner
Lisäosalla saa poistettua median, johon ei ole missään linkitetty.
Regenerate Thumbnails Advanced
Lisäosalla saa luotua uudestaan mediakirjaston pienoiskuvat.
ThumbPress – Stop Generating Unnecessary Thumbnails
WordPress loisi sivustolle ladatuista kuvista 11 kpl eri kokoisia versioita. Lisäosalla saa estettyä tarpeettomien versioiden luonnin.
Tietokannan hallintaan liittyvät lisäosat:
Advanced Database Cleaner
Lisäosalla saa pois tarpeettoman datan nopeasti. Käytössä on muistettava, että automaattitallennukset saattavat olla hyödyllisiä ja ne on ehkä jätettävä.
Better Search Replace
Ohjelmalla saa korvattua tietokannassa olevia merkkijonoja toisella merkkijonolla. Toiminto on jossakin muussakin lisäosassa, mutta tällä pääsee toimintoon vaivattomimmin.
Database Cleaner: Clean, Optimize & Repair
Monipuolinen ja kehittynyt tietokannan huolto-ohjelma.
WP-DBManager
Toinen tietokannan huolto-ohjelma.
Oma koodi on pääosin Code Snippet-tietueissa. Joitakin lisäosia olen räätäköinyt sivuilleni paremmin sopiviksi.Muutokset ovat vähäisiä.
Olen omassa koodauksessani pyrkinyt hyödyntämään WordPressin omia funktioita. Olen tutkinut dokumentaatioita niiden löytämiseksi. Lähes kaikki funktioihin liittyvät ehtolauseet, joissa ehtoina käytetään toisia funktioita, olen käyttänyt WordPressin tai bbPress-lisäosan funktioita.
- is_page() – tutkii, onko tavallinen sivu.
- is_bbpress() – tutkii onko kyse foorumiosiosta.
- bbp_is_single_forum() – tutkii, onko yksittäinen foorumi.
- bbp_is_single_topic() – tutkii, onko yksittäinen säie.
- is_user_logged_in() – tutkii, onko joku kirjautunut vai ei.
- is_front_page() – tutkii, onko etusivu.
- comments_open() – tutkii voiko sivulle laittaa kommentteja.
- current_user_can(’activate_plugins’) – tutkii, voiko käyttäjä lisätä lisäosia; käytännössä testataan sitä, onko käyttäjä järjestelmänvalvoja vai ei.
Muutama poikkeus tähän on.
Loin mobiiliselainten tunnistamiseen karkean tunnistusfunktion:
function tap_is_mobile(){
global $_SERVER;
$Firefox=strpos($_SERVER[’HTTP_USER_AGENT’], ’Firefox’);
$Tablet=strpos($_SERVER[’HTTP_USER_AGENT’], ’Tablet’);
$Android=strpos($_SERVER[’HTTP_USER_AGENT’], ’Android’);
$Chrome=strpos($_SERVER[’HTTP_USER_AGENT’], ’Chrome’);
$iPad=strpos($_SERVER[’HTTP_USER_AGENT’], ’iPad’);
$iPhone=strpos($_SERVER[’HTTP_USER_AGENT’], ’iPhone’);
$mobile=($Chrome && $Android) || ($Firefox &&($Android || $Tablet)) || $iPad || $iPhone;
return $mobile;
}// mobiilitunnistus päättyySe ei kata kaikkia mobiiliselaimia. Sivusto on kuitenkin suunniteltu niin, että tietokone- ja mobiiliversiot poikkeavat hyvin vähän toisistaan. Jos mobiilitunnistus ei kata käytettyä selainta, asialla ei ole suurta merkitystä.
Toinen on sivuosioiden listaus:
function pageLists($list){
global $post;
$currentUrl=’https://’ . $_SERVER[’HTTP_HOST’]. $_SERVER[’REQUEST_URI’];
$blogi=stristr($currentUrl,’/wordpress/blogikirjoitukset/’);
$ristikot=stristr($currentUrl,’/wordpress/ristikot/’);
$muut=stristr($currentUrl,’/wordpress/muut/’);
);
$list =array();
$list[0]=$blogi;
$list[1]=$ristikot;
$list[2]=$muut;
return $list;
}Blogi, ristikot ja muut ovat samaa sivutyyppiä eikä niitä voi tyypin perusteella eritellä. Taulukkomuuttuja puretaan:
$address = pageLists($list);
$y=0;
foreach ($address as $value) {
if($y==0){$blogi=$value;}
elseif($y==1){$ristikot=$value;}
elseif($y==2){$muut=$value;}
$y++;
}Yksittäisiä muuttujia voi hyödyntää ehtoina, esim.:
if($blogi){
…
}Lisäksi foorumin listausjärjestyksen määrittelyssä olen $_GET ja $_COOKIE muuttujia hyödyntänyt ehdoissa. Ehkä niissä olisi voinut hyödyntää muuttujien käyttöä WordPressin funktioiden välityksellä vähän mutkan kautta. En kokenut listausjärjestyksen muutoksien halintaa näillä muuttujilla ongelmalliseksi. Itse järjestyksen muutos toteutetaan WordPressin sisäisillä funktioilla add_filter() hyödyntäen.
function setting_my_cookies() {
if(isset($_COOKIE)){
if($_GET[”myOrderBy”]){setcookie(”myOrderBy”, $_GET[”myOrderBy”], time()+840000, ”/”, ”sanaristikkofoorumi.net”, 1);}
elseif(!isset($_COOKIE[”myOrderBy”])) {setcookie(”myOrderBy”, ”default”, time()+840000, ”/”, ”sanaristikkofoorumi.net”, 1);}
}
}add_action( ’init’, ’setting_my_cookies’,8 );
…
// Foorumin aiheiden listaus alkaa
function my_custom_display_topic_index_query () {
global $_GET,$_COOKIE;
if(isset($_GET[’myOrderBy’]) && !($_GET[’myOrderBy’]==’default’)){ // if seleted default, it just don’t change anything or returns original listing order
$args[’orderby’] =$_GET[’myOrderBy’];
if($_GET[’myOrderBy’]==’post_date’) $args[’order’] = ’DESC’;
else $args[’order’] = ’ASC’;
}elseif(isset($_COOKIE[’myOrderBy’]) && !($_COOKIE[’myOrderBy’]==’default’)){
$args[’orderby’] =$_COOKIE[’myOrderBy’];
if($_COOKIE[’myOrderBy’]==’post_date’) $args[’order’] = ’DESC’;
else $args[’order’] = ’ASC’;
}
return $args;
}if((isset($_GET[’myOrderBy’]) && !($_GET[’myOrderBy’]==’default’)))
add_filter(’bbp_before_has_topics_parse_args’, ’my_custom_display_topic_index_query’ );
elseif(isset($_COOKIE[’myOrderBy’]) && !($_COOKIE[’myOrderBy’]==’default’) && !isset($_GET[’myOrderBy’]))
add_filter(’bbp_before_has_topics_parse_args’, ’my_custom_display_topic_index_query’ );function printSelections(){
global $_SERVER,$_GET,$_COOKIE;
$selval=$_GET[’myOrderBy’];
$extraClass=’ active-button’;
if(isset($selval)){
if($selval==’post_date’) $extraClass2=$extraClass;
elseif($selval==’post_title’) $extraClass3=$extraClass;
elseif($selval==’default’) $extraClass1=$extraClass;
}elseif(isset($_COOKIE[’myOrderBy’])){
if($_COOKIE[’myOrderBy’]==’post_date’) $extraClass2=$extraClass;
elseif($_COOKIE[’myOrderBy’]==’post_title’)
$extraClass3=$extraClass;
elseif($_COOKIE[’myOrderBy’]==’default’)
$extraClass1=$extraClass;
}elseif(!isset($selval) && !isset($_COOKIE[’myOrderBy’])){
$extraClass1=$extraClass;
}
$currentUrl=’https://’. $_SERVER[’HTTP_HOST’]. $_SERVER[’REQUEST_URI’];
$myUrlPos= stripos($currentUrl,’?’);
if($myUrlPos)
$currentUrl=substr($currentUrl,0,$myUrlPos);
return ’<div class=”queries”>
<table class=”querytable” style=”width:auto!important;margin:0!important;padding:0!important;border-width:0″><tr>
<th>Järjestys:</th><td style=”padding:0 3px!important”>
<a id=”orderbutton1″ class=”subscription-toggle orderbutton’.$extraClass1.'” href=”’.$currentUrl.’?myOrderBy=default” style=”padding-left:6px!important”>Kommentoitu</a></td><td style=”padding:0 3px 0 0!important”><a id=”orderbutton2″ class=”subscription-toggle orderbutton’.$extraClass2.'” href=”’.$currentUrl.’?myOrderBy=post_date” style=”padding-left:6px!important”>Aloitettu</a></td><td style=”padding:0 3px 0 0!important”><a id=”orderbutton3″ class=”subscription-toggle orderbutton’.$extraClass3.'” href=”’.$currentUrl.’?myOrderBy=post_title” style=”padding-left:6px!important”>Otsikko</a></td></tr></table></div>’;
}//foorumin aiheiden listaus loppuuKaikki tämä koodi ei ole missään tiedostossa vaan se haetaan tietokannasta. Näin kukaan ei voi tunkeutua koodiin yrittämällä hakkeroida jotain tiedostoa.
CSS ja JavaScript
Ulkonäköön vaikuttavissa CSS:ssä olen pyrkinyt poistamaan käytöstä tarpeettomia tyylitiedostoja, esim.:
add_action(’wp_enqueue_scripts’, function() {
…
wp_dequeue_style( ’bbp-default’);
wp_dequeue_style( ’moderation-tools-bbpress’);
…
},99);Ehtolauseilla olen antanut osan CSS:stä vain bbPress lisäosaa tai tavallisia sivuja koskevaksi. Tarpeettomia CSS-tiedostoja pyrin välttämään. Muukin CSS on tarpeen vaatiessa kohdistettua. Jonkin verran kohdistettua CSS:ää on erillistiedostojen sijaan <style></style> tägejä hyödyntäen.
Vastaavalla tavalla olen poistanut turhia JavaScript-tiedostoja:
if(is_bbpress()){
add_action(’wp_enqueue_scripts’, function(){
wp_deregister_script( ’screenr-plugin’ );
wp_deregister_script( ’bootstrap’ );
wp_deregister_script( ’screenr-gallery-carousel’ );
wp_deregister_script( ’screenr-gallery-masonry’);
wp_deregister_script( ’screenr-gallery-justified’);
}, 99);}Lisäykset ja mallinteet
Lisäykset tulevat joko PHP-koodiin tai PHP- koodia ja HTML-koodia hyödyntäviin erillistiedostoihin, mallinnetiedostoihin.
PHP-koodin lisäyksissä ja mallinnetiedostoissa hyödynnän WordPressin add_action()-funktiota, alla esimerkki:
add_action( ’wp_head’, function () {… // lisätään jotain sivun HEAD-osaan; tässä on käytetty ns. anonyymiä funktiota; voi käyttää toisena parametrina myös nimettyä funktiota
…
},3 );
Mallinnetiedostoissa on do_action()-funktio. Sille on pari PHP-koodissa, esim.:
do_action(’bbp_template_before_single_forum’); // erillistiedostossa
add_action(’bbp_template_before_single_forum’, ’jokin_funktio’); // toinen parametri on funktion nimi, mutta voi käyttää myös ns. anonyymejä funktioita
do_action() on eräänlainen ”koukku”, joka nappaa muualla määritellyn sisällön. Koukkuja voi bbPress-lisäosan kohdalla jossakin määrin itse määritellä. Niitä voi varsin vapaasti poistaa. Sisältö luodaan yksinkertaisilla echo-komennolla.
Tämä on yleisin tapa lisätä omaa koodia WordPressin ydintoimintoja hyödyntäen.
Joissakin tapauksissa add_filter() voisi myös hyödyntää. Sille ei ole vastineita erillisissä mallinnetiedostoissa. add_filter toimii return-komennolla. Sisältö koostetaan lopuksi yksittäisten echo-komentojen sijaan yhdellä komennolla, jossa voi olla muuttujia, funktioita tai suoraan kirjoitettua koodia. Käytän sitä SPOILER-tägien luomiseen (tuon käytön esille edempänä tässä säikeessä).
Sisältöä voi luoda myös pikakoodeilla:
add_shortcode( ’pikakoodin_nimi’, ’pikakoodin_funktio’ );
Pikakoodi merkitään [pikakoodin_nimi]. Pikakoodi korvautuu www-sivulla HTML-koodilla.
Pikakoodi luo sisällön return-toiminnolla samaan tapaan kuin edellä olleessa esimerkissä add_filter()-funktio. Mikäli pikakoodeja haluaa käyttä add_action() kanssa, pitää laittaa pikakoodi do_shortcode()-funktion sisälle, esim.:
echo ’<div>’.do_shortcode(’pikakoodin_nimi’);
Omia pikakoodeja minulla on editoriin liittyen:
function myBR(){
return ’<br />’;
}
function myHR(){
return ’<hr />’;
}
// id=”avaa”
function myShowAll(){
return ’<p><span class=”button button-act open-all-hided”>Näytä kaikki piilotetut</span></p>’;
}
function myHideAll(){
return ’<p><span class=”button button-act close-all-hided”>Piilota kaikki näytetyt</span></p>’;
}
function myShowHideAll(){
return ’<table style=”border-collapse: collapse; border-width: 0; width: auto!important;float:left;clear:both;”><tbody><tr><td style=”border-collapse: collapse; border-width: 0; padding: 0;”><span class=”button button-act open-all-hided”>Näytä kaikki piilotetut</span></td><td style=”border-collapse: collapse; border-width: 0; padding: 0 0 0 5px;”><span class=”button button-act close-all-hided”>Piilota kaikki näytetyt</span></td></tr></tbody></table>’;
}function spacerSPAN(){
return ’<span class=”spacer-span”></span>’;
}
add_shortcode(’BR’,’myBR’,10);
add_shortcode(’HR’,’myHR’,10);
add_shortcode(’br’,’myBR’,10);
add_shortcode(’hr’,’myHR’,10);
add_shortcode(’SPACER’,’spacerSPAN’,10);
add_shortcode(’SP’,’spacerSPAN’,10);
add_shortcode(’spacer’,’spacerSPAN’,10);
add_shortcode(’sp’,’spacerSPAN’,10);
add_shortcode(’SHOW-ALL’,’myShowAll’,10);
add_shortcode(’HIDE-ALL’,’myHideAll’,10);
add_shortcode(’SHOW-HIDE-ALL’,’myShowHideAll’,11);Omia pikakoodeja olen lisännyt myös BBCode Deluxe -lisäohjelman kautta omien SPOILER-merkkauksien luomiseksi. Käsittelen niitä tässä säikeessä edempänä. Lisäksi ns. vimpainten luomia pikakoodeja olen upottanut muuhun HTML-koodiin.
add_filter() käytetään mm. säännöllisesti toistuvien merkkien vaihtamiseen toisiksi merkeiksi tai merkkien poistamiseen, esim.:
add_filter(’bbp_after_list_forums_parse_args’, function($args) {
$args[’separator’] = ”;
return $args;
});
add_filter(’bbp_after_get_topic_admin_links_parse_args’, function($args) {
$args[’sep’] = ”;
return $args;
});
add_filter(’bbp_after_get_reply_admin_links_parse_args’, function($args) {
$args[’sep’] = ”;
return $args;
});Add_filter käytetään muihinkin muutoksiin. Se on luonteeltaan muuntelufunktio. Suurin muutoksiin sitä ei ole tarkoitettu.
Kaksi palaa olen lainannut bbPress Style Pack -lisäosasta. Lisäosa kokonaisuudessa sisälsi niin paljon turhaa, ettei koko lisäosaa kannattanut asentaa. Useimpia lisäosia saa varsin vapaasti hyödyntää, kuten bbPress Style Pack lisäosaa.
SPOILER-tägien luomiseen käytin paljon aikaa. Yritin löytää ensin muutettavia kohtia ilman hakutoimintoa. Mutta se oli toivotonta – kuin etsisi neulaa heinäsuovasta. Etsin Windows-tietokoneella NotePad++ avulla koodeja, joita pitäisi muuttaa. Seuraava tiedostot pitää toistaa aina kun WordPress päivittyy:
- …/wp-content/languages/fi-68f2cec7514bf8563c723a4d675fcfe6.json
- …/wp-content/languages/fi.mo.
- …/wp-includes/css/editor.min.css
- …/wp-includes/js/quicktags.js
- …/wp-includes/js/tinymce/skins/lightgray/skins.min.css
- …/wp-includes/js/tinymce/skins/lightgray/content.min.css
Käyn lävitse tässä kommentissa tekemiäni muutoksia.
Editorimoodille ”Teksti” löysin kohdan, joka määrittelee, mitä koodia kukin painike tuottaa. Muutin < del > ja < /del > -koodit SPOILER-tägin muodostavaksi koodiksi. Samassa yhteydessä sain muutettua painikkeen tekstin. Muutos oli helppo
…/wp-includes/js/quicktags.js (lisäsin välilyöntejä, jotta SPOILER-toiminto ei aktivoituisi):
edButtons[50] = new qt.TagButton( ’SPOILER’, ’SPOILER’, ’[ SPOILER=apusisältö ]’, ’[ /SPOILER ]’, ”, ”, ”, …;Visuaaliselle editorille muutin seuraavia kielitiedostojaa:
- …/wp-content/languages/fi-68f2cec7514bf8563c723a4d675fcfe6.json
- …/content/languages/fi.mo.
Muutin graafisessa editorissa SPOILER-painikkeen tekstin kielitiedostoa …/wp-contents/languages/fi.po muuttamalla ja siitä fi.mo-tiedosto luoden PoEdit Windows-sovelluksella. Myös json-koodattua kielitiedostoa piti muuttaa.
Visuaalisen editorin kohdalla en mistään löytänyt vastaavia koodeja, jotka määrittelevät, mitä tuotetaan yliviivaus (< del > …< /del >). Siksi asia piti ratkaista niin, että DEL-merkkaukset muuttuvat lopulliseksi koodiksi LÄHETÄ-painikkeen painamisen jälkeen. Tämä muutos tulee editorin käsittelyn jälkeen, joten tätä kohtaa ei tarvitse muuttaa mitenkään WordPressin päivityksen yhteydessä.
function replaceDEL($content){
$content = str_replace(’<del>’,'<div class=”spoiler-container”><div class=”smallfont”><strong>Näytä/piilota apusisältö: </strong><input type=”button” value=”Näytä” class=”open-close”></div><div class=”alt2″><div style=”display:none”>’,$content);
$content = str_replace(’</del>’,'</div></div></div>’,$content);
return $content; }
add_filter(’bbp_get_topic_content’, ’replaceDEL’);
add_filter(’bbp_get_reply_content’, ’replaceDEL’);
}Toki myös tekstieditoria käytettäessä lopullinen muuttaminen tapahtuu LÄHETÄ-painikkeen painamisen jälkeen, mutta aloitusmerkkauksessa [+SPOILER=apusisältö+] voi vaihtaa tekstin ”apusisältö” joksikin muuksi, koska käytetään itse määriteltyä merkkausta eikä editorin vakiomerkkausta. Samassa yhteydessä on myös yksi muu korvaus, joka ei ole edellä esillä.
Vaihdoin painikkeen kuvakkeen CSS-tyylitiedostoa …/wp-includes/js/tinymce/skins/lightgray/skins.min.css muuttamalla.
.mce-i-strikethrough:before{content:”\e019″;}Vaihdoin painikkeen kuvakkeen myös CSS-tyylitiedostoa …/wp-includes/css/editor.min.css muuttamalla.
i.mce-i-strikethrough:before {content: ”\f177”;}Muutin tyylitiedostolla myös sitä, miten koodit näkyvät editorissa …/wp-includes/js/tinymce/skins/lightgray/content.min.css muuttamalla. SPOILER-tägin ohella muutin lohkositaattien ulkoasun.
blockquote {border: 1px dotted #000;padding:10px;}blockquote.d4pbbc-quote {padding-top:0;max-height:20em;overflow-y:auto;}.d4p-bbp-quote-title {padding: 3px 10px 3px 10px;margin-left:-10px;background-color:#333;margin-rigt:0;display:inline-block;margin-right:5px;}.d4p-bbp-quote-title a{white-space:pre;padding-top:3px;padding-bottom:3px;}.d4p-bbp-quote-title a::after{content:” kirjoitti:”;position:relative;background-color:#333;left:-50px}.d4p-bbp-quote-title a:link,.d4p-bbp-quote-title a:visited{color:#fff}del::before{content:”NÄYTÄ/PIILOTA:”;padding: 3px 5px;display:inline-block;color: #fff!important;background-color:#333;margin-left:-5px;margin-right:5px}del{display:inline-block;margin-right:5px;padding:0 5px 0 5px; border:1px dotted #333;text-decoration:none}Ratkaisuni suurin etu oli siinä, että NÄYTÄ/PIILOTA sain editorin tyylitiedostoa muuttamalla graafisessa editorissa näkymään erittäin havainnollisesti, mikä tekee käytöstä niin helpon kuin mahdollista.
Ratkaisu on käytännössä visuaalisesti selkeämpi kuin tilanne, jossa napin painallus olisi tuottanut koodin [ SPOILER=apusisältö ]…[ /SPOILER ] . Tuon koodin ulkoasua ei voi tyylitiedostolla hallita (niillä voi hallita vain merkkauksia, jotka alkavat merkillä ”<”).
Ratkaisullani on siis haittansa ja etunsa. Tekstieditorin tyylinen ratkaisu olisi ollut jossakin suhteessa parempi ja jossakin suhteessa huonompi. Minusta ratkaisu on tavalliselle käyttäjälle selkeämpi.
Visuaalisen editorin pikku ongelma on se, että kun tekee tiettyjä ulkoasumerkintöjä, tekstin jatkaminen normaalina tekstinä saattaa tuottaa käyttäjille ongelmia. Muutokseni liittyvän tämän tyypin merkkauksiin. Olen asiaa kyllä opastanut. Asia liittyy editorin toimintatapaan, ei tekemiini muutoksiini. En voi asiaan vaikuttaa.
Tekemäni muutokset aiheuttavat aina sen, että jos ydinohjelmaa tai editoria päivittää, muutokset pitää tehdä uudestaan. WordPressin päivityksessä editorilisäosaan liittyviä tiedostoja muutetaan. Kun tietää, mitä muutoksia pitää tehdä, ei jatkossa mene hirveä aika muutosten kanssa. Visuaalisen editorin kohdalla tosin on aika monta muutettavaa tiedostoa. Lisäosana asennettua editorilisäosaa ei tarvitse muuttaa, vaikka editorin joutuisi joskus päivittämään.
Jouduin muuttamaan myös lisäosan BBCode Deluxe tiedostoa …/wp-content/plugins/bbcode-deluxe/class-bbcode.php. Koska kyse on lisäosasta, muutoksia ei tarvitse toistaa WordPressin päivityksen yhteydessä.
shortcode(’SPOILER’, [&$this, ’shortcode_spoiler’]); //alkuperäinen
add_shortcode(’spoiler’, [&$this, ’shortcode_spoiler’]); //alkuperäinen
add_shortcode(’ISPOILER’, [&$this, ’shortcode_ispoiler’]);
add_shortcode(’ispoiler’, [&$this, ’shortcode_ispoiler’]);
add_shortcode(’IISPOILER’, [&$this, ’shortcode_iispoiler’]);
add_shortcode(’iispoiler’, [&$this, ’shortcode_iispoiler’]);
add_shortcode(’IIISPOILER’, [&$this, ’shortcode_iiispoiler’]);
add_shortcode(’iiispoiler’, [&$this, ’shortcode_iiispoiler’]);Alla alkuperäisen SPOILER-tägin muuttamani koodi:
public function shortcode_spoiler($atts = [], $content = null)
{
if (!$content) {
return ”;
}
if (!$atts) {
return ’<div class=”spoiler-container”><div class=”smallfont”><strong>Näytä/piilota apusisältö: </strong><input type=”button” value=”Näytä” class=”open-close”></div><div class=”alt2″><div style=”display:none”>’ . $this->do_shortcode($content) . ’</div></div></div>’;
}
$subattribs = substr(implode(’ ’, $atts), 1);
return ’<div class=”spoiler-container”><div class=”smallfont smallfont-own”><strong>Näytä/piilota ’ . $subattribs . ’: </strong><input type=”button” value=”Näytä” class=”open-close”></div><div class=”alt2″><div style=”display:none”>’ . $this->do_shortcode($content) . ’</div></div></div>’;
}Lisätyt SPOILER-tägit loin samaan tapaan käyttäen pohjana yllä olevaa koodia. Loin kaikille CSS:llä ulkoasutoteutukset.
Päivitetty 4.12.2023.
Yhdistä näiden avulla:
Sulje lisäikkuna