File less

[laugher]

Sto seguendo un corso on line per fare un template. E su Altervista la cosa ha funzionato discretamente anche se devo fare ulteriori sviluppi (come si vede su www.laugher.altervista.org: è il link per vedere l'esperimento, nient'altro).

Poi ho installato Wordpress su Aruba. Ed è tutto andato bene, tranne i file less.
Le istruzioni che dicevano nel corso per il foglio di stile, cioè queste:

<link rel="stylesheet/less" href="<?php bloginfo( 'stylesheet_directory'); ?>less/style.less"><script src="<?php bloginfo( 'template_url' ); ?>/js/libs/less.js"></script>

<script src="<?php bloginfo( 'template_url' ); ?>/js/libs/modernizr.js"></script>

non vanno bene. I file less non li vede proprio.
Allora ho provato ad usare la funzione require_once che per il menu' funziona:

<link rel="stylesheet/less" href=<?php require_once('less/style.less'); ?>
<script src=<?php require_once('js/libs/less.js') ?></script>
<script src=<?php require_once('js/libs/modernizr.js') ?></script>

Ora i file li vede, ma dice:

i file .less sono sbagliati. Li ho sostituiti + volte con quelli che so essere giusti, ma continua a darmi lo stesso errore.

Avete idea del perchè risultino sbagliati e come si risolva il problema?

[cronenborg]

<link rel="stylesheet/less" href=<?php require_once('less/style.less'); ?>

Il codice qui sopra è completamente errato:
- mancano le virgolette dopo href
- l'istruzione href indica un link ad una risorsa http esterna quindi spero che il file less/style.less contenga al suo interno del testo tipo http://www.sito.com/percorso/fogliodistile.css

Ma comunque anche così si tratta di un approccio totalmente sbagliato:
- usare la funzione php require_once per includere uno script direttamente all'interno di html e per di più in una istruzione href è aberrante! Che fa quello script, scrive solo una URL? E allora perchè dovrebbe chiamarsi .less? E inoltre, non bastava una variabile all'interno di href se proprio dovevi rendere tutto dinamico?

Mah...

[laugher]

In realtà in origine invece di require_once c'era bloginfo.

Considerando che devo usare il file less/style.less quale sarebbe l'istruzione che dovrei mettere al posto di quella errata?

[cronenborg]

bloginfo( 'stylesheet_directory'); è una funzione di wordpress che restituisce il percorso per la cartella dove sono i fogli di stile. Quindi basta aggiungere uno slash dopo il richiamo a php:

<link rel="stylesheet/less" href="<?php bloginfo('stylesheet_directory'); ?>/less/style.less">

Però un file .less non è un .css...

[laugher]

bloginfo( 'stylesheet_directory'); è una funzione di wordpress che restituisce il percorso per la cartella dove sono i fogli di stile. Quindi basta aggiungere uno slash dopo il richiamo a php:

<link rel="stylesheet/less" href="<?php bloginfo('stylesheet_directory'); ?>/less/style.less">

Però un file .less non è un .css...

Se guardi sopra questo è proprio l'istruzione nel primo post che funziona su Altervista ma non su Aruba.

[cronenborg]

Scusa, ma che vuol dire "funziona su Altervista ma non su Aruba"? Quella è una funzione di wordpress: se non hai installato wordpress anche sul tuo spazio su Aruba come pretendi di utilizzarla?

[laugher]

Scusa, ma che vuol dire "funziona su Altervista ma non su Aruba"? Quella è una funzione di wordpress: se non hai installato wordpress anche sul tuo spazio su Aruba come pretendi di utilizzarla?

E' chiaro che l'ho installato WP. Le altre cose vanno bene. Solo le librerie java non vanno. Ho persino messo l'hosting Linux.

[cronenborg]

Ok forse c'è un problema di percorsi.
Prova a mettere

<?php bloginfo('stylesheet_directory'); ?>

all'interno del body della index.php del tuo tema ad esempio e guarda cosa stampa a schermo. Se il percorso è corretto allora il problema sta nel percorso scritto nel javascript che interpreta il less. Controlla il tuo javascript less.js (o come lo hai chiamato) e vedi se indirizza allo stesso percorso.

[laugher]

Ho copia/incollato queste 3 righe dal twentyten che è uno dei template che viene dato da wordpress.

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

Io non so cosa sia successo. Nel senso che in queste righe non vedo alcun riferimento nè alle librerie nè ai file less che ne fanno parte. Però mi sono trovato il file style.css bello e compilato. E tutto va come deve.

Mi pare un sogno ma vorrei anche capirci qualcosa. Non è che mi sai dire che accidenti è successo? Per completezza ti metto PER INTERO, il file header.php

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html lang="en"> <![endif]-->
<!--[if IE 7]>    <html lang="en"> <![endif]-->
<!--[if IE 8]>    <html lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     
    <title><?php wp_title(''); ?></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />


</head>

<body>

<div id="container">

<header>

</header>

Come accidenti ha fatto a compilare e scrivere style.css, prendendo il container da grid.less se non apro le librerie e non richiamo i file .less?

[cronenborg]

Non conosco il template twentyten, ma è del 2010, quindi credo tu usi una versione vecchia di WP. In questo header non vedo il richiamo alla funzione wp_head() che spiegherebbe quello che è successo. Wordpress crea e richiama i CSS e i JS dinamicamente tramite alcuni hook nella funzione wp_head. E' probabile che la spiegazione sia nel file functions.php che trovi nel tuo tema. Lì dovrebbero esserci i richiami anche al JS che compila il foglio di stile less.

Oppure... non è che hai installato il plugin wp-less nel tuo WP? Quello spiegherebbe come fa il tuo WP a riscrivere i less.