En la lección anterior aprendimos a instalar WordPress usando Composer, ahora vamos a trabajar con un nuevo proyecto de Laravel para crear el sitio que mostrará la información almacenada a través del CMS usando «Corcel», un paquete que nos permite acceder a la base de datos de WordPress por medio del ORM Eloquent.
Lo primero que vamos a hacer, por supuesto es crear un proyecto de Laravel usando Composer:
$ composer create-project laravel/laravel www.styde.net
Instalando Corcel
Instalamos «Corcel» usando Composer nuevamente:
$ composer require jgrossi/corcel
Siguiendo la documentacion del paquete, creamos una nueva conexión de base de datos para acceder a la data de WordPress, esto lo hacemos editando el archivo config/database.php agregando la siguiente información.
'wordpress' => [
'driver' => 'mysql',
'host' => 'localhost',
'database' => env('WP_DATABASE'),
'username' => env('WP_USERNAME'),
'password' => env('WP_PASSWORD'),
'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',
'prefix' => 'wp_',
'strict' => false,
'engine' => null,
],
Recuerda que es una buena práctica registrar cualquier información «sensible» en tu proyecto en el archivo .env, en este caso hemos agregado las siguientes variables:
WP_DATABASE= WP_USERNAME= WP_PASSWORD=
Las credenciales a usar son las mismas que definimos en el proyecto que creamos para el CMS de WordPress.
Usando Corcel
Para este ejemplo vamos a usar el modelo Page de Corcel que nos permite, entre otras cosas, obtener una página usando su «slug» como parámetro de búsqueda. Si ingresamos nuevamente al CMS que creamos en la lección anterior y vamos a la sección «Pages» (Páginas), veremos una página de muestra que se crea con la instalación de WordPress:
Vamos a crear un controlador para mostrar esta página usando Artisan desde la consola:
$ php artisan make:controller HomeController
Y dentro del método index() agregamos lo siguiente:
public function index()
{
$data = \Corcel\Page::slug('sample-page')->first();
return view('home')->with('data', $data);
}
Sí ¡Eso es todo!.
Ahora necesitamos una vista para mostrar la página de bienvenida del sitio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Styde</a>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<h1>{{ $data->title }}</h1>
<p>{!! $data->content !!}</p>
<strong>By </strong>{{ $data->author->display_name }}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
En este caso se está utilizando el CDN de Bootstrap, si quieres aprender a integrar Bootstrap de una manera más profesional en tu proyecto te recomiendo revisar el siguiente material:
En Styde tenemos un curso dedicado a Sass, desde lo más básico hasta las características más avanzadas. Puedes encontrarlo en el siguiente enlace: Curso de Sass
En esta vista vamos a mostrar el título, el contenido y el autor de la entrada y la ubicamos dentro del tag body:
<h1>{{ $data->title }}</h1>
<p>{!! $data->content !!}</p>
<strong>By </strong>{{ $data->author->display_name }}
Finalmente, solo nos queda agregar la ruta correspondiente, esto lo hacemos editando el archivo app/Http/routes.php (en Laravel 5.2 y 5.1) o en /routes/web.php (en Laravel 5.3)
Route::get('/', [
'as' => 'home',
'uses' => 'HomeController@index'
]);
Si accedes a la url de tu proyecto de Laravel, deberás ver algo similar a esto:
Algunas funcionalidades de Corcel
Modelo Post
// All published posts
$posts = Post::published()->get();
$posts = Post::status('publish')->get();
// A specific post
$post = Post::find(31);
echo $post->post_title;
// Filter by meta/custom field
$posts = Post::published()->hasMeta('field')->get();
$posts = Post::hasMeta('acf')->get();
Modelo Page
// Find a page by slug
$page = Page::slug('about')->first(); // OR
$page = Post::type('page')->slug('about')->first();
echo $page->post_title;
Modelo Category
// all categories
$cat = Taxonomy::category()->slug('uncategorized')->posts()->first();
echo "<pre>"; print_r($cat->name); echo "</pre>";
// only all categories and posts connected with it
$cat = Taxonomy::where('taxonomy', 'category')->with('posts')->get();
$cat->each(function($category) {
echo $category->name;
});
// clean and simple all posts from a category
$cat = Category::slug('uncategorized')->posts()->first();
$cat->posts->each(function($post) {
echo $post->post_title;
});
Para más información puedes ingresar a la documentación oficial del paquete: https://github.com/jgrossi/corcel
No hemos terminado
Aunque hemos avanzado un poco más, falta mucho para darle funcionalidad a este sitio web, afortunadamente estas dos lecciones te han dado un muy buen punto de partida.
Si quieres seguir aprendiendo con nosotros puedes revisar los siguientes cursos que te ayudarán a completar tu proyecto:
- Curso de Sass
- Curso de Vue.js
- Curso avanzado de Eloquent ORM
- Curso de Git y GitHub
- Curso de administración de servidores para PHP y Laravel
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
