Παρασκευή 15 Σεπτεμβρίου, 2017

Κατασκευή σελίδας με MonoCMS. Εφαρμογή εξωτερικού θέματος

Όπως έχει γίνει γνωστό, το MonoCMS δεν υποστηρίζει την αυτοματοποιημένη εφαρμογή εξωτερικών θεμάτων. Ωστόσο είναι ακόμα αρκετοί εκείνοι που ζητούν συγκεκριμένα θέματα για τον ιστότοπό τους, θέματα που δεν είναι άμεσα διαθέσιμα για ένα CMS και πρέπει να προσαρμοστούν στις ανάγκες του συστήματος από κάποιον τεχνικό ή προγραμματιστή.

Παρακάτω θα εφαρμόσουμε το θέμα Metronic ΑceCV, στον πίνακα ελέγχου του MonoCMS, το οποίο διατίθεται δωρεάν από το keenthemes.com (http://keenthemes.com/free-bootstrap-templates/acecv-professional-cv-parallax-bootstrap-template/).

Το συγκεκριμένο θέμα είναι "μίας σελίδας", συνεπώς δεν θα εφαρμόσουμε την εμφάνισή του στο πρότυπο σελίδας του MonoCMS, αλλά μόνο στο πρότυπο αρχικής σελίδας.

Ξεκινώντας

Αφού κάναμε λήψη του θέματος, μεταφέρουμε τα αρχεία, στον ίδιο κατάλογο όπου έχουμε εγκαταστημένο το CMS μας.
Έπειτα, αν δεν είναι ήδη ενεργοποιημένο, ενεργοποιούμε το στυλ product από τη σελίδα Επεξεργασία > Εμφάνιση.

Ο κύριος όγκος εργασίας αφορά την αντιγραφή της αρχικής σελίδας του θέματος, στην αρχική σελίδα του MonoCMS, διατηρώντας ωστόσο εκείνα τα κομμάτια του κώδικα τα οποία χρειάζονται για να παραμείνει η σελίδα διαχειρίσιμη μέσω του πίνακα ελέγχου.

Το περιεχόμενο της αρχικής σελίδας του MonoCMS βρίσκεται στο ενεργό στυλ σελίδας, στο φάκελο themes. Στην έκδοση 3.0, αυτά τα στυλ είναι δύο, το blog και το product. Για το παράδειγμά μας, θα επιλέξουμε να αντικαταστήσουμε το στυλ εμφάνισης product με το αρχείο του θέματος, οπότε το περιεχόμενο του αρχείου index.html του θέματος, πρέπει να μεταφερθεί σ' εκείνο του product-index.php.

Κατ' αρχάς θα ξεκινήσουμε με το ν' απενεργοποιήσουμε την επιλογή εναλλαγής στυλ στον πίνακα ελέγχου, στο αρχείο monofiles/theme.php, προσθέτοντας την ιδιότητα disabled στις αντίστοιχες φόρμες, όπως φαίνεται στην παρακάτω εικόνα.



Ανοίγουμε το αρχείο index.html παράλληλα με το αρχείο product-index.php στον κειμενογράφο μας.

Συνεχίζουμε αντικαθιστώντας ένα ένα τα μέρη του κώδικα του αρχικού αρχείου του θέματος, με τον δικό μας κώδικα php. Αύτα είναι τα στοιχεία της ιστοσελίδας μας, τα οποία θέλουμε να είναι επεξεργάσιμα μέσω του πίνακα ελέγχου, όπως ο τίτλος της σελίδας μας ή η ροή δημοσιεύσεων.


Συμπεριλαμβάνουμε το αρχείο log.php, στην κορυφή του αρχείου.
<!-- Προσθήκη -->
<?php
include $rot.'monofiles/log.php'
?>
<!-- Τέλος προσθήκης -->

Όλες οι προσθήκες στον κώδικα, σημειώνονται με το html σχόλιο "<!-- Προσθήκη -->".

Ακολουθούν οι προσθήκες:

Στο <head> της σελίδας μας, ο τίτλος θα αντικατασταθεί από τον τίτλο του MonoCMS.
<title><?php print $stgs['title'] ?></title>


Στο <head> της σελίδας, ένα αρχείο css για τις όποιες απαραίτητες παρεμβάσεις στην εμφάνιση επιθυμούμε να κάνουμε.
<link href="style.css" rel="stylesheet" type="text/css">

Ο κώδικας διαχείρισης του φόντου σελίδας, στο τέλος του <head>;
<style type="text/css">
        <?php
        // εικόνα φόντου
    $bgimg = $stgs['monoback'];
    if (($stgs['background']=='on') && ($stgs['centered']=='on'))
        print PHP_EOL.'.promo-block { background:url("'.$rot.'images/'.$bgimg.'") no-repeat center;background-size:100% }'.PHP_EOL;
    
    elseif ($stgs['background']=='on')
        print PHP_EOL.'.promo-block { background:url("'.$rot.'images/'.$bgimg.'") }'.PHP_EOL;
        ?>
</style>

Στη θέση του λογότυπου, τοποθετούμε έναν τίτλο σελίδας, ο οποίος θα μπορεί πλέον να αλλάζει από τις ρυθμίσεις του πίνακα ελέγχου. Ταυτόχρονα, απενεργοποιήσαμε τον κώδικα του παλιού λογότυπου.

<a class="logo-wrap" href="#body">
   <!-- Προσθήκη -->
   <span style="font-size:27px"><?php print $stgs['title'] ?></span>
   <!-- Τέλος προσθήκης -->
   <!--<img class="logo-img" src="img/logo.png" alt="Asentus Logo">-->

</a>

Απενεργοποιούμε όλο τον κώδικα στο στοιχείο <div class="collapse navbar-collapse nav-collapse"> και τον αντικαθιστούμε με το μενού του MonoCMS.

<?php
 
if ($stgs['navigation'] == 'on') {
    include $rot.'monofiles/set-nav.php';
    load_navigation();} ?>

Αντικαθιστούμε το περιεχόμενο της επικεφαλίδας <h1 class="promo-block-title"> με την περιγραφή σελίδας.

<!-- Προσθήκη --><h1 class="promo-block-title">
<?php echo $stgs['description'] ?>
<!-- Τέλος προσθήκης -->
<!-- Alisa <br/> Portman -->
</h1>
Κάνουμε αποκοπή στα στοιχεία <div id="about"> και <div id="experience"> και στη θέση τους βάζουμε το επεξεργάσιμο στοιχείο της σελίδας αντικειμένων 'maininfo'.

<!-- Προσθήκη στη θέση του / about / experience -->
<?php
load_content('maininfo');
?>
<!-- Τέλος προσθήκης -->

Τα στοιχεία που αποκόψαμε, τα κρατάμε σε ένα ξεχωριστό αρχείο, για να τα προσθέσουμε αργότερα στον πίνακα ελέγχου.

Στην κατηγορία 'Work' θα κάνουμε δύο παρεμβάσεις. Η μία για τον τίτλο με την περιγραφή, και η δεύτερη για τη ροή δημοσιεύσεων.

<div class="col-sm-6">
 <!-- Προσθήκη -->
 <?php
  load_content('main01');
?>
<!-- Τέλος προσθήκης -->
<!-- <h2>Latest products</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna aliqua enim minim veniam exercitation</p> -->

</div>

Η ροή δημοσιεύσεων, θα μπορούσε να μπει στη κατηγορία 'Work', όπως και έγινε.

<!-- Προσθήκη -->
<?php
 if($stgs['proposts'] > 0){  $files = $stgs['proposts'];
  include $rot.'monofiles/set-posts.php';

  //print '<div id="res-nav"><a href="'.$stgs['ppage'].'" class="readmore" title="Περισσότερα">Περισσότερα<span class="next">→</span></a></div>';
 }
?>
<!-- Τέλος προσθήκης -->

Αποκόψαμε επίσης τα στοιχεία Clients, Promo banner και Contact και τα κρατήσαμε σε ξεχωριστό αρχείο, προσωρινά. Στη θέση τους βάλαμε άλλο ένα διαχειρίσμο στοιχείο από τη σελίδα 'Αντικείμενα' του πίνακα ελέγχου, το 'main02'.

<!-- Προσθήκη Clients / Promo Banner / Contact -->
 <?php
   load_content('main02')
 ?>
 <!-- Τέλος προσθήκης -->

Άλλη μία αντικατάσταση του λογότυπου, με τον τίτλο, στο footer.

<div class="col-xs-6">
 <!-- Προσθήκη -->
 <?php print '<span style="font-size:20px">'.$stgs['title'].'</span>' ?>
 <!-- Τέλος προσθήκης -->
 <!-- <img class="footer-logo" src="img/logo.png" alt="Acecv Logo"> -->

</div>

Τέλος κάνουμε αποκοπή και στο footer και αφού το αντιγράψουμε προσωρινά σε ένα απλό αρχείο κειμένου, προσθέτουμε στη θέση του το footer του MonoCMS.

<div class="col-xs-6 text-right sm-text-left">
 <!-- Προσθήκη -->
 <?php
   load_content('footer')
  ?>
 <!-- Τέλος προσθήκης -->
</div>


Προσθήκες κώδικα σε δευτερεύοντα αρχεία

Το αρχείο της αρχικής σελίδας δεν είναι το μόνο που περιέχει σημαντικό κώδικα. Προκειμένου να είναι ολοκληρωμένο το αποτέλεσμα, πρέπει το στυλ εμφάνισης του θέματος να μεταφερθεί και στα αρχεία monofiles/set-posts.php, monofiles/set-nav.php και monofiles/set-general.php.

set-posts.php:
Αλλάξαμε ολοκληρωτικά τη λογική του $excerpt, του αποσπάσματος δηλαδή, το οποίο εμφανίζεται στις δημοσιεύσεις της αρχικής σελίδας, για να μοιάζει στην εμφάνιση με εκείνη του θέματος.

//$excerpt = $xmlpost->postinfo->post->excerpt;
 //$excerpt = ($excerpt == 'none') ? $content : substr($content,0,(int)$excerpt).'&#8230;';

$excerpt = strip_tags($content,'<div><img>');
if (strlen($excerpt) > 400) {
  $offset = (400 - 3) - strlen($excerpt);
  $excerpt = '<div class="plike">'.substr($excerpt, 0, strrpos($excerpt, ' ', $offset)).'</div>';
}

 Η κατηγορία δημοσίευσης

$pcat = ($category != '') ? $category : '';

Και τέλος η δημοσίευση

$post = '<div class="col-sm-4 sm-margin-b-50"><h4 style="position:relative;top:260px;z-index:90"><a href="#">'.$title.'</a> <span class="text-uppercase margin-l-20">'.$pcat.'</span></h4>'.$excerpt.'<a class="link" href="#">Περισσότερα</a></div>';

print $post;


set-nav.php:
Εφ'όσον το μενού δεν κατευθύνει σε άλλες σελίδες, αλλά σε σημεία της ίδιας σελίδας, το υπομενού δεν χρειάζεται. Το αποτέλεσμα είναι ένα πιο απλοποιημένο αρχείο.

    function load_navigation($cur = NULL)    {
       
        global $rot;
        include $rot.'monofiles/display-order.php';
       
        $nav = display_order($rot.'monofiles/filesinfo/navigation.xml');
       
        if ($nav !== false){

            print '<div class="menu-container">
                    <ul class="nav navbar-nav navbar-nav-right">
                                ';
       
            foreach($nav as $item) {
               
                $tar = ($item->tar=='checked') ? ' target="_blank"' : '';
                echo '<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="'.$item->url.'"'.$tar.' title="'.$item->title.'">'.$item->title.'</a>';
               
            }
        print '</ul></div>';
        }
    }


set-general.php:Στο αρχείο set-general.php βρίσκεται η λειτουργία load_content() με την οποία φορτώνουμε το περιεχόμενό μας μέσω των επεξεργάσιμων αντικειμένων. Η μόνη παρέμβαση που θα κάνουμε εδώ, γίνεται για χάρη της κατηγορίας 'Work', την οποία συναντήσαμε παραπάνω. Διαμορφώνουμε λοιπόν το στοιχείο της παραγράφου ως εξής:

if ($name == 'moreinfo')
  echo '<h2>'.strip_tags((string)$obj->heading).'</h2>'.PHP_EOL.'<p>'.strip_tags((string)$obj->paragraph).'</p>';

Με αυτό τον τρόπο θα μπορούμε να διαμορφώσουμε τον τίτλο και το κείμενο, απ'ευθείας μέσα από τον πίνακα ελέγχου.


Προσθήκες μέσω πίνακα ελέγχου

Με τις παραπάνω προσθήκες στον κώδικα, μπορούμε πλέον να διαμορφώσουμε τη σελίδα μας μέσα από τον πίνακα ελέγχου. Τα αρχεία που αποκόψαμε, θα τα προσθέσουμε στα αντίστοιχα σημεία από τα οποία αποκόπηκαν, δια μέσου της φόρμας του πίνακα ελέγχου αυτή τη φορά. Τα σημεία αυτά, περιέχουν πλέον τα δεδομένα τα οποία φορτώνουμε με την εντολή load_content , δηλαδή τα maininfo, main01, main02 και footer. Σε αυτά τα 4 επεξεργάσιμα μέρη, θα προσθέσουμε αυτά τα στοιχεία τα οποία αποκόψαμε από τη σελίδα με την ίδια σειρά. Δηλαδή:

maininfo: About , Experience
main01: Τίτλος και περιγραφή Work
main02: Clients, Promo banner, Contact
footer: Footer


Από το μενού του πίνακα ελέγχου πλέον, επιλέγουμε Επεξεργασία > Αντικείμενα, επιλέγουμε το maininfo και μεταφέρουμε το πρώτο στοιχείο που αποκόψαμε, δηλαδή το About, σε ένα αντικείμενο HTML. Πατάμε 'Προσθήκη' και είμαστε έτοιμοι.
Με τον ίδιο τρόπο μπορούμε να μεταφέρουμε και τα υπόλοιπα κομμάτια κώδικα που αποκόψαμε, με εξαίρεση το main01, στο οποίο θα προσθέσουμε ένα στοιχείο παραγράφου, αντί για HTML.
Για να το κάνουμε αυτό πηγαίνουμε ξανά στη σελίδα Επεξεργασία > Αντικείμενα, επιλέγουμε main01 και φτιάχνουμε ένα νέο στοιχείο παραγράφου, γράφοντας απλώς τον τίτλο και το κείμενο που θέλουμε.

Μπορούμε τώρα να κάνουμε παρεμβάσεις στον κώδικα μέσα από τον πίνακα ελέγχου και να αλλάξουμε τη σειρά εμφάνισης των στοιχείων της σελίδας μας.


Μενού

Το μενού, πρέπει να προστεθεί από τη σελίδα Επεξεργασία > Μενού. Το μόνο που χρειάζεται να κάνουμε είναι να προσθέσουμε 5 αντικείμενα μενού τα οποία θα έχουν τον αντίστοιχο τίτλο και τo αντίστοιχo URL με αυτά που αντικαθιστούμε.




Ολοκλήρωση


Για να ολοκληρωθει η διαδικασία εγκατάστασης, ανοίγουμε το αρχείο style.css που βρίσκεται στον αρχικό κατάλογο, σβήνουμε το περιεχόμενό του και γράφουμε τον παρακάτω κώδικα:

@charset "utf-8";

.img-responsive {position:relative; top:-70px}
.sm-margin-b-50 .plike {
    font-size: 15px;
    font-weight: 400;
    color: #a6a7aa;
    margin-bottom: 15px;
    }


Τέλος αποθηκεύουμε το αρχείο index.html ως product-index.php, στον κατάλογο themes/product/ και διαγράφουμε το index.html από τον αρχικό κατάλογο.


Δείτε το αποτέλεσμα